className只更改每个其他类 [英] className only changing every other class
问题描述
我正在使用带有 getElementsByClassName（）的JavaScript执行一个小文本，我收到了一些不需要的结果。我希望脚本将每个CSS类更改为一个新类。问题是每个其他班级只会改变...
I'm performing a small text with JavaScript with the getElementsByClassName() and I am getting some unwanted results. I would like the script to change each CSS class to a new class. The issue is that every other class is only changing...
我想使用纯js这个问题是如何用于练习目的。
I would like to use pure js how this issue as it is for practice purposes.
我想到的第一件事就是白色空间，虽然删除它时没有任何不同。
The first thing that came to mind was white spaces, although when removing the this did not make any differnce.
任何人都可以指出我的错误是什么？
Can anyone point our what I am doing wrong?
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>
<script>
var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
blockSet[0].className = "block-selected";
blockSet[1].className = "block-selected";
blockSet[2].className = "block-selected";
blockSet[3].className = "block-selected";
blockSet[4].className = "block-selected";
blockSet[5].className = "block-selected";
blockSet[6].className = "block-selected";
blockSet[7].className = "block-selected";
</script>
</body>
</html>
CSS类：
.block-default {
width: 100px;
height:50px;
background-color: green;
border: 1px solid red;
padding:10px;
}
.block-selected {
width: 100px;
height:50px;
background-color: blue;
border: 1px solid white;
padding:10px;
}
推荐答案
因为你改变了 .className blockSet 这是 的HTMLCollection 。当元素遭受某些更新时，具有相同类（ block-default ）的元素的集合将发生更改。
Because you change the .className of the blockSet which is an HTMLCollection. The collection that have elements with same class (block-default) will change when the elements suffers some updates.
换句话说，当您更改元素的 .className 时，集合将排除该元素。这意味着 HTMLCollection 的大小将减少。如果将具有该类的元素添加到DOM中，大小将增加。
In other words when you change the .className of an element the collection will exclude that element. This means that the size of the HTMLCollection will decrease . Also the size will increase if an element with that class has beed added to the DOM.
要解决此问题，您始终只能更改第一个element .className 。
To solve this you can always change only the first element .className.
for(var i = 0; i<blockSetLength; i++)
{
blockSet[0].className = "block-selected";
}
注意：按元素更改类元素的Intead ，您可以使用为迭代元素，并更改 .className 。
Notes: Intead of changing class element by element, you can iterate through elements with for and change .className.
var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
console.log(blockSet);
for(var i = 0; i<blockSetLength; i++)
{
blockSet[0].className = "block-selected";
}
.block-default {
width: 100px;
height:50px;
background-color: green;
border: 1px solid red;
padding:10px;
}
.block-selected {
width: 100px;
height:50px;
background-color: blue;
border: 1px solid white;
padding:10px;
}
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>
如果您在DOM（非集合）中添加新项目，则大小将增加，如下例所示。
If you add a new item in DOM (not collection) the size will increase as presented in the example below.
var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
alert("Current size: " + blockSet.length);
document.body.innerHTML += '<div class="block-default">BLOCK9</div>';
alert("After adding an element in DOM size: " + blockSet.length);
.block-default {
width: 100px;
height:50px;
background-color: green;
border: 1px solid red;
padding:10px;
}
.block-selected {
width: 100px;
height:50px;
background-color: blue;
border: 1px solid white;
padding:10px;
}
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>
这篇关于className只更改每个其他类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
