Fatal编程技术网
  • javascript/
  • Javascript className仅每隔一个类更改一次

Javascript className仅每隔一个类更改一次

javascript html css

Javascript className仅每隔一个类更改一次,javascript,html,css,Javascript,Html,Css,我正在使用JavaScript执行一个小文本，使用getElementsByCassName（）执行，得到了一些不需要的结果。我希望脚本将每个CSS类更改为一个新类。问题是，每一个其他类只是在改变 我想使用纯js来解决这个问题，因为它是用于实践目的的 想到的第一件事是空白，尽管当删除空白时，这没有任何区别 谁能指出我做错了什么 <html> <head> <link rel="stylesheet" type="text/css" href="

我正在使用JavaScript执行一个小文本，使用
getElementsByCassName（）
执行，得到了一些不需要的结果。我希望脚本将每个CSS类更改为一个新类。问题是，每一个其他类只是在改变

我想使用纯js来解决这个问题，因为它是用于实践目的的

想到的第一件事是空白，尽管当删除空白时，这没有任何区别

谁能指出我做错了什么

<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>
因为您更改了
块集
的
.className
，该块集是一个。如果集合中的元素具有相同的类（
block default
），则当元素发生某些更新时，该集合将发生更改

换句话说，当您更改元素的
.className
时，集合将排除该元素。这意味着HTMLCollection的大小将减小。另外，如果将具有该类的元素添加到DOM中，大小将增加

要解决此问题，您始终只能更改第一个元素
.className

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

.block默认值{
宽度：100px；
高度：50px；
背景颜色：绿色；
边框：1px纯红；
填充：10px；
}
.选定的块{
宽度：100px；
高度：50px；
背景颜色：蓝色；
边框：1px纯白；
填充：10px；
}
BLOCK1
区块2
区块3
区块4
区块5
区块6
区块7
BLOCK8
这对我很有效

var blockSet=document.getElementsByClassName（“块默认值”）；
var blockSetLength=blockSet.length；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；
块集[0]。className=“已选择块”；

.block默认值{
宽度：100px；
高度：50px；
背景颜色：绿色；
边框：1px纯红；
填充：10px；
}
.选定的块{
宽度：100px；
高度：50px；
背景颜色：蓝色；
边框：1px纯白；
填充：10px；
}
BLOCK1
区块2
区块3
区块4
区块5
区块6
区块7

BLOCK8
通过给
.className
赋值，覆盖该元素上的每个类。 您可能需要查看
.classList
属性

删除一个类：

blockSet[0].classList.remove('block-default');
添加新类：

blockSet[0].classList.add('block-selected');
当您尝试执行jQuery通常为您执行的操作时，一个好的开始点是

document.getElementsByClassName返回一个对象，它是live

HTMLDOM中的HTMLCollection是活动的；它会自动更新 当基础文档发生更改时

所以当你打电话的时候

blockSet[0].className = "block-selected";
您更改了基础文档，并且该项不再在集合中（块集[0]现在是您原始选择中的第二项）。

此错误是因为您需要执行块集[0]。className='block selected'

blockSet[0].className = 'block-selected' 您不需要编写块集[1]，块集[2]

你可以做：

for (var s=0;s<blockSetLength;s++) {
  blockSet[0].className = 'block-selected';
}

for（var s=0；s而不是使用，
返回一个活动的HTMLCollection，它将随着
类名的更改而更改，

您可以使用，
返回不会更改的非活动节点列表


querySelectorAll（）
比
getElementsByClassName（）
（IE8+与IE9+相比）具有更好的IE支持。

它也更加灵活，因为它支持CSS选择器（CSS2用于IE8+，CSS3用于IE9+）

但是，
querySelectorAll（）
比
getElementsByClassName（）
慢，如果要处理数千个DOM元素，请记住这一点

片段



var blockSet=document.querySelectorAll（“.block default”）；
var blockSetLength=blockSet.length；
块集[0]。className=“已选择块”；
块集[1]。className=“已选择块”；
块集[2]。className=“已选择块”；
块集[3]。className=“已选择块”；
块集[4]。className=“已选择块”；
块集[5]。className=“已选择块”；
块集[6]。className=“已选择块”；
块集[7]。className=“块选定”；


.block默认值{
宽度：100px；
高度：50px；
背景颜色：绿色；
边框：1px纯红；
填充：10px；
}
.选定的块{
宽度：100px；
高度：50px；
背景颜色：蓝色；
边框：1px纯白；
填充：10px；
}


BLOCK1
区块2
区块3
区块4
区块5
区块6
区块7

BLOCK8
发生错误的原因是.className返回一个实时HTMLCollection。因此，当您执行类似操作时：


blockSet[0].className = "block-selected";


您的集合
块集[0]
将成为
块集[1]
。因此，当您执行该行时：


blockSet[1].className = "block-selected";


您不会更改您认为的
块集[1]
，而是更改起始
块集[2]

所以你可以这样做：


var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
for(var i=0;i<blockSetLength;i++){
    blockSet[0].classList.add('block-selected'); //add the new class first
    blockSet[0].classList.remove('block-default'); //delete the old one
}



var blockSet=document.getElementsByClassName（“块默认值”）；
var blockSetLength=blockSet.length；

对于（var i=0；i发生此错误是因为
块集
是一个
HTMLCollection
，它是“活动的”。
HTMLCollections
随着页面上的元素更新而更新

每次交换一个
类名
，您都在一个接一个地缩短
块集

要解决此问题，只需执行以下操作：


for (var i = 0; i < 8; i += 1) {
    blockSet[ 0 ].className = "block-selected";
}



for（变量i=0；i<8；i+=1）{
块集[0]。className=“已选择块”；
}


这样你就可以把
HTMLCollection
一个接一个地分块了

迭代1:
[div1、div2、div3、div4、div5、div6、div7、div8]

迭代2:
[div2，div3，div4，div5，div6，div7，div8]

迭代3:
[div3、div4、div5、div6、div7、div8]

迭代4:
[div4，

for (var i = 0; i < 8; i += 1) {
    blockSet[ 0 ].className = "block-selected";
}



var nmax = blockSet.length - 1;
for (var n=nmax; n>=0; n--) {
    blockSet[n].className = 'block-selected';
}



var blockSet = document.getElementsByClassName("block-default").className = "block-selected";



blockSet[0].className = 'block-selected';



blockSet[1].className = 'block-selected';



blockSet[2].className = 'block-selected';



blockSet[3].className = 'block-selected'; 



while(blockSetLength--){ 
    //this will change the class of n-1 dom object 
    blockSet[blockSetLength].className='block-selected';
}



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


var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}



<script>
    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    for (var i = blockSet.length - 1; i >= 0; i--) {
        blockSet[i].className = "block-selected";
    };
</script>