代码之家 › 专栏 › 技术社区 › sasori

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

css html javascript

sasori · 技术社区 · 14 年前

根据我正在读的书,在使用Javascript时最好按类更改CSS。但是怎么做呢?有人能给我一个例子吗?

9 回复 | 直到 3 年前

Asaph 14 年前

假设你有:

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

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

你可以在星期四换班 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>

Jan TuroÅ 10 年前

自从 类列表 is supported in all major browsers 和 jQuery drops support for IE<9

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

您可以轻松地使用以下语法:

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

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

此外,您还可以使用 remove, toggle, contains

Andy Shellam 14 年前

我强烈推荐jQuery。然后,它变得非常简单:

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

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

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

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

gmoz22 6 年前

操纵实际的CSS类 https://stackoverflow.com/a/50036923/482916

knittl 14 年前

className 财产:

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

nwayve 10 年前

有两种方法可以使用vanilla javascript实现这一点。首先是 className 第二个是 classList . 可以在所有浏览器中使用,但在修改元素的class属性时使用起来可能会很麻烦。

类名 是一种方法,否则修改元素的类更容易使用 类列表

<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 布尔值

类列表 MDN . 它还包括 browser compatibility 如果这是一个问题,可以通过使用Modernizer进行检测和polyfill(如果需要)来解决。

meouw 14 年前

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

Juri 14 年前

http://api.jquery.com/category/css/

chanakya s 7 年前

<!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>