javascript - 用 JavaScript 改变 CSS

Question

当使用 JavaScript 更改 CSS 时，JavaScript 是否只是简单地创建新的 inline-CSS 来代替总统？我一直觉得内联 CSS 很垃圾，想知道是否有更好的方法？

例如，如果你有

<div id="author">Author's name</div>引用外部 CSS 通常为绿色，如果您想将其更改为红色必须使用

document.getElementById('author').style.color='#FF0000'

必须使用内联样式来更改外观吗？

Answer 1

不，您不是在修改 CSS。您只是在设置 style 属性。元素的标记由三件事决定:CSS、style 和内联属性，如 width="100"。它们的应用顺序可能有点模糊。

style 总是会否决 CSS，除非您使用 !important。

更改元素标记的更常见方法是添加和删除类。这使您可以将所有样式定义保留在 CSS 文件中，并大大降低代码的复杂性。

你可以这样做:

document.getElementById('author').className = "selected";

向它添加一个类并让它以不同的标记显示。

如果您使用的是 jQuery，则可以使用 addClass 和 removeClass。在幕后，这只是修改了 className 属性。编写您自己的实现很容易，您只需要进行一些字符串处理。