如何通过Javascript更改css类样式？

Question

根据我正在阅读的书,当你使用Javascript来改变css时,最好按类改变css.但是怎么样？有人可以为此提供样本片段吗？

Answer 1

假设你有:

<div id="mydiv" class="oldclass">text</div>

和以下样式:

.oldclass { color: blue }
.newclass { background-color: yellow }

您可以mydiv在javascript中更改类,如下所示:

document.getElementById('mydiv').className = 'newclass';

在DOM操作之后,您将留下:

<div id="mydiv" class="newclass">text</div>

如果要添加新的css类而不删除旧的css类,可以附加到它:

document.getElementById('mydiv').className += ' newClass';

这将导致:

<div id="mydiv" class="oldclass newclass">text</div>

Answer 2

由于所有主流浏览器都支持classList ,并且jQuery drop支持IE <9(在2.x分支中作为评论中的Stormblack点),考虑到这个HTML

<div id="mydiv" class="oldclass">text</div>

您可以轻松使用此语法:

document.getElementById('mydiv').classList.add("newClass");

这也将导致:

<div id="mydiv" class="oldclass newclass">text</div>

另外你还可以使用remove,toggle,contains方法.

Answer 3

我强烈推荐jQuery.然后变得如此简单:

$('#mydiv').addClass('newclass');

您不必担心删除旧类,因为addClass()只会附加到它.你也有removeClass();

getElementById()方法的另一个优点是,您可以使用一行代码同时将它应用于多个元素.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

第一个示例将该类添加到页面上的所有DIV元素.第二个示例将新类添加到当前具有旧类的所有元素.

Answer 4

如果要操作实际的 CSS 类而不是修改 DOM 元素或使用修饰符 CSS 类，请参阅 /sf/answers/3502584641/。

Answer 5

使用该className属性:

document.getElementById('your_element_s_id').className = 'cssClass';

Answer 6

有两种方法可以使用 vanilla javascript 来完成。第一个是className，第二个是classList。 className适用于所有浏览器，但在修改元素的类属性时可能难以使用。 classList是一种更简单的方法来修改元素的类。

彻底设置元素的类属性，className是要走的路，否则修改元素的类，使用更容易classList。

初始 Html

<div id="ID"></div>

设置类属性

var div = document.getElementById('ID');
div.className = "foo bar car";

结果：

<div id="ID" class="foo bar car"></div>

添加班级

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

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

<div id="ID" class="foo bar car tar"></div>

删除类

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

注意：就像add，如果需要删除一个类，请将其删除。如果它在那里，它将被删除，否则什么都不会发生。
结果：

<div id="ID" class="foo bar"></div>

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

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

.toggle有第二个布尔参数，在我看来，它是多余的，不值得讨论。

有关更多信息classList，请查看MDN。如果这是一个问题，它还涵盖了浏览器兼容性，这可以通过使用 Modernizr 进行检测并在需要时使用 polyfill 来解决。