如何使 CSS 样式最终化？答案

【问题标题】：How to make CSS style final?如何使 CSS 样式最终化？
【发布时间】：2021-04-13 11:25:59
【问题描述】：

我需要关于如何制作 CSS 样式final的帮助，以便它们不会被 Javascript 覆盖。

问题：有时，由于 JavaScript 代码中的 img 标签，所有内容（all 的图像的所有样式）都会得到覆盖。

这是我的代码：

 <img src='logoImg' style='width:45px; height:30px;' >

请告诉我如何在 JavaScript 或 CSS 中做到这一点。

所需的输出：我需要徽标图像具有最终样式。所以通过 DOM（文档对象模型）不受 JavaScript 的影响。

【问题讨论】：

这是一个错误的语法，应该是<img src='logoUrl' style='width:45px; height:30px;' >
如果你想防止JS覆盖样式，你必须使用!important;来提高样式特异性权重
JavaScript 总是有可能覆盖你的 CSS。你想防止什么问题？在将其投入生产之前，应检查和验证您网站中的 CSS 和 JavaScript。如果用户运行 JavaScript 客户端，然后改变网站的外观，有什么问题？
请，请，请...不惜一切代价避免!important！
不不不，当然还有其他方法！这里更大的问题是他的剧本正在改变他们不应该改变的风格。

标签： html css dom

【解决方案1】：

您可以尝试将 !important 关键字添加到您的 CSS 属性中，以防止它们被更改。

示例

const test = document.getElementById("test");

// The color won't change to orange
// due to !important keyword in the CSS code
test.style.backgroundColor = "orange";

#test {
  width: 50px;
  height: 50px;
  background: green !important;
}

&lt;div id="test"&gt;&lt;/div&gt;

理想情况下，最好使用不同的解决方案来解决这个问题，例如使用更具体的方法来选择 HTML 元素并更改其属性。

如果您通过选择tag 应用了某种样式，则可以在涉及CSS 时使用class 或id 覆盖它。如果您在 JavaScript 代码中搜索元素，则可以通过 class 名称或 ID value 来查找它们。

在您的情况下，另一种解决方案是重新编写/修改针对您的 img 标记的 JavaScript 代码，并跳过具有特定类的图像，例如 logo，或者为所有人创建一个自定义类不包含徽标元素的标准图像，并使用 document.getElementsByClassName 方法在 JavaScript 代码中查找它们。

【讨论】：

!important 应该不惜一切代价避免。
为什么要避免它们？
因为它基本上很糟糕，并且在将来会使将来的维护变得复杂-您正在尝试找出他们无法更改此设置的原因。
@UTkY8oApLDOe92我在 MDN 上查看以下文章 !important developer.mozilla.org/en-US/docs/Web/CSS/…
我试过了，它奏效了。谢谢你的回答！

【解决方案2】：

如果要防止 JS 覆盖图片的样式，则需要在 CSS 中设置样式并添加 important; 以提高其比重。 !important 比 inline-style 具有更高的特异性权重，因此 JS 样式（JS 将样式添加为内联样式）将不适用。

function resize() {
  document.querySelector("img").style.height = "200px";
  document.querySelector("img").style.width = "200px";
}

img.test {
  width: 45px !important;
  height: 30px !important;
}

<img src='https://via.placeholder.com/200x200.jpg' class="test">
<button onclick="resize()">Test</button>

【讨论】：