修改html本地样式,html-如何通过Javascript更改CSS类样式？

使用香草javascript可以通过两种方式完成此操作。 第一个是classList，第二个是classList。className在所有浏览器中均可使用，但在修改元素的class属性时可能难以操作。 classList是修改元素类的简便方法。

要彻底设置元素的类属性，应该使用classList，否则要修改元素的类，则使用classList会更容易。

初始HTML

设置类属性

var div = document.getElementById('ID');

div.className = "foo bar car";

结果：

新增课程

div.classList.add("car");// Class already exists, nothing happens

div.classList.add("tar");

注意：在添加类之前，无需测试类是否存在。 如果需要添加一个类，只需添加它。 如果已经存在，则不会添加重复项。

结果：

删除课程

div.classList.remove("car");

div.classList.remove("tar");

div.classList.remove("car");// No class of this name exists, nothing happens

注意：与classList一样，如果需要删除某个类，请将其删除。 如果存在，它将被删除，否则将不会发生任何事情。

结果：

检查类属性是否包含特定的类

if (div.classList.contains("foo")) {

// Do stuff

}

切换课程

var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed

// classWasAdded is false since "bar" was removed

classWasAdded = div.classList.toggle("bar"); // "bar" gets added

// classWasAdded is true since "bar" was added

我认为classList具有第二个布尔参数，该参数是多余的，不值得讨论。

有关classList的更多信息，请签出MDN。 如果担心的话，它也涵盖了浏览器的兼容性，可以通过使用Modernizr进行检测并在需要时使用polyfill来解决。