我将document.getElementsByClassName("red")的结果赋值给数组redElements。然后我将一个元素从类。red更改为类。blue。我希望redElements保持它原来的三个值,但是它现在只包含两个仍然是红色的元素。这是令人惊讶的。这是什么原因呢?我应该查什么来了解更多关于这种情况发生的原因?
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: red; }
.blue { color: blue; }
</style>
</head>
<body>
<span class="red">1</span>
<span class="red">2</span>
<span class="red">3</span>
<script>
var redElements = document.getElementsByClassName("red");
alert(redElements.length);
firstRedElement = redElements[0];
firstRedElement.className = "blue";
alert(redElements.length);
</script>
</body>
</html>
这是因为className
函数将覆盖现有的类:
试试这个:
<script>
var redElements = document.getElementsByClassName("red");
alert(redElements.length);
firstRedElement = redElements[0];
firstRedElement.className = firstRedElement.className + " blue";
alert(redElements.length);
</script>
或者你甚至可以试试:
firstRedElement.classList.add("blue");