我将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>
答案 0 :(得分:0)
那是因为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");