javascript - 用 JavaScript 改变 CSS

Question

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

例如，如果您有

<div id="author">Author's name</div>通常从对外部 CSS 的引用中显示为绿色，并且您想将其更改为红色必须使用

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

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

Answer 1

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

style总是会否决 CSS，除非你使用!important.

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

你可以这样做：

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

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

如果您使用的是 jQuery，则可以使用addClass和removeClass. 在引擎盖下，这只是修改了className属性。编写自己的实现很容易，你只需要做一些字符串杂耍。

Answer 2

改变 HTML 元素样式的方法不止一种。例如，如果使用 jQuery，您可以轻松地向元素添加/删除类名，如下所示：

$("div").addClass("className");

Answer 3

在类中定义所有样式总是更简洁，因此您可以轻松更改整个应用程序的外观和感觉，而不是使用内联样式。

最简单的方法是定义一个 CSS 类

.reddiv {color: #FF0000}

然后您可以使用 jquery 轻松地将 div 的颜色更改为红色

$('#author').addClass('reddiv');