Question

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

Answer 1

假设你有：

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

以及以下样式：

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

您可以在javascript中更改mydiv上的课程，如下所示：

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 is supported in all major browsers和jQuery drops support for 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

使用className属性：

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

Answer 5

document.getElementById("my").className = 'myclass';

Answer 6

使用vanilla javascript有两种方法可以实现。第一个是className，第二个是classList。 className适用于所有浏览器，但在修改元素的class属性时可能难以处理。 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。如果这是一个问题，它还包括browser compatibility，可以通过使用Modernizr进行检测和必要时进行填充来解决。

Answer 7

您可能还有兴趣使用jQuery修改它： http://api.jquery.com/category/css/

Answer 8

如果你想操纵实际的CSS类而不是修改DOM元素或使用修饰符CSS类，请参阅 https://stackoverflow.com/a/50036923/482916

Answer 9

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div").addClass(function(){
            return "par" ;
    });
});
</script>
<style>
.par {
    color: blue;
}
</style>
</head>
<body>
<div class="test">This is a paragraph.</div>
</body>
</html>

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

9 个答案: