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

时间:2020-03-06 14:30:04  来源:igfitidea点击:

我想做这个:

e.className = t;

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

解决方案

是的,这是可行的(类名是字符串,如乔纳提到的那样)。另外,我们可以使用DOM Level 2样式界面直接在对象上设置样式属性。例如。,

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

其中"按钮"(大概是)按钮对象。 :-)

如果e是对DOM元素的引用,并且我们有一个像这样的类:.t {color:green;},那么我们要将类名引用为一个字符串:

e.className = 't';

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

我们绝对希望将数据格式(xHTML)与设计(CSS)和行为(javascript)分开。

因此,最好是根据事件在JS中将美学关注点委托给CSS样式,然后根据事件在JS中添加和删除类。

E.G:将错误消息涂成红色。

的CSS

.error
{
    color: red;
}

JS

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

N.B:

  • 此片段仅是示例。在现实生活中,我们仅会为此使用js。
  • document.getElementById并不总是可以互操作的。最好使用JS框架进行处理。我个人使用JQuery。