Question

我正在尝试使用javascript添加css类，但它无法正常工作

var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) {
  x[i].className += 'newclassname';
}

但是当我尝试更改背景时，它可以正常工作

var x = document.getElementsByClassName("oldclassname");
var i;
for (i = 0; i < x.length; i++) {

  x[i].style.backgroundColor = "red";
}

添加css文件时我做错了什么

Answer 1

Dicer's name: Bob Level: 1 Experience: 0 Role: Gunner Role Stats: Health: 100 Attack: 20 Defense: 30是一个空格分隔的类名列表。您的代码的问题在于它不会将类名与空格分开。试试这个：

className

没有空格，它只有一个类名

var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) 
{
   x[i].className += ' newclassname'; // WITH space added
}

Answer 2

更好地使用classList：

var x = document.getElementsByClassName('oldclassname');
for (var i = 0; i < x.length; i++) {
  x[i].classList.add('newclassname');
}

.newclassname { color: blue; }

<div class="oldclassname">Hello, world!</div>

Answer 3

嗨，有一种更简单的方法可以使用javascript

要添加课程：-

document.getElementsByClassName('otherClassName')[0].classList.add('newClassName');

要删除课程：-

document.getElementsByClassName('otherClassName')[0].classList.remove('newClassName');

希望这会有所帮助：）

Answer 4

有效。检查目标类名称的形成。示例代码。

<html>
<head>
<style>
.classFrom{
    font-family: sans-serif;
    color: red;
}

.classTo{
    font-family:cursive;
    color: blue;
}
</style>

<script type="text/javascript">
function clickme(){
var elmList = document.getElementsByClassName('classFrom');
  for (i = 0; i < elmList.length; i++) 
    {
       elmList[i].className += " classTo";
    }
}
</script>
</head>
<body>
<div class="classFrom">SampleText</div>
<button onClick="clickme()">ChangeCSS</button>
</body>
</html>

使用document.getElementsByClassName添加css类

4 个答案: