可以通过JavaScript设置元素的CSS类吗？

Question

我想这样做：

e.className = t;

其中t是我在样式表中定义的样式的名称。

Answer 1

如果e是对DOM元素的引用，并且您有类似这样的类：.t {color:green;}，那么您希望将类名称作为字符串引用：

e.className = 't';

Answer 2

是的，这是有效的（将类名称作为字符串，如jonah所述）。此外，您可以使用DOM Level 2 Style界面直接在对象上设置样式属性。如，

button.style.fontFamily = "Verdana, Arial, sans-serif";

其中button（推测）是一个按钮对象。 ： - ）

Answer 3

这不仅有效，而且甚至是最佳实践。

您明确希望将数据格式（xHTML）与设计（CSS）和行为（javascript）分开。

因此，根据事件添加和删除JS中的类会更好，同时将美学问题委托给css样式。

E.G：用红色着色错误信息。

CSS

.error
{
    color: red;
}

JS

var error=document.getElementById('error');
error.className='error';

N.B：

• 这个片段只是一个例子。在现实生活中，你只会使用js。
• document.getElementById并不总是可互操作的。最好使用JS框架来处理它。我个人使用JQuery。

Answer 4

这里是使用jQuery添加和删除类的示例。

// js
  $("p:first").addClass("t");
  $("p:first").removeClass("t");

// css
  .t {
    backgound: red
  }