js通过类名获取元素，改变元素类名后数组发生变化

最新推荐文章于 2024-07-06 23:14:34 发布

爱写点小屎山

最新推荐文章于 2024-07-06 23:14:34 发布

阅读量349

点赞数 9

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_64310316/article/details/139426488

版权

今天同学遇到一个问题，觉得很有用，就记录一下。在使用getElementsClassName获取类名后，返回的是一个伪数组，但是在for循环遍历这个伪数组对类名进行更改，达到改变样式的效果，就会出现一个问题，就是不会按顺序进行修改

原因

当对获取的数组的第一个元素的类名进行更改后，这个数组就发生了变化，被更改的元素就从数组中删除掉了，因为他的类名被更改，所以在获取元素的那里，就获取不到这个元素了，所以数组中就没有这个元素了

解决办法

第一种就是从获取元素处解决，将获取类名改为获取标签名，以下面的隔行换色为例，使用getELementsTagName进行获取元素

第二种是在对类名进行更改时，使用p[i].className += ’ style-red’。这里类名前加一个空格，这样相当于个此元素加了一个类名，多类名。有些属性可能会被覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .style.black{
            color: block;
        }
        .style-red{
            color: red;
        }
    </style>
</head>
<body>
    <button id="btn">换色</button>
    <p class="style-black">11111111111111111</p>
    <p class="style-black">222222222222222222</p>
    <p class="style-black">333333333333333333333</p>
    <p class="style-black">44444444444444444444444</p>
    <p class="style-black">5555555555555555555555</p>
    <p class="style-black">6666666666666666666666</p>
    <p class="style-black">777777777777777777777777</p>
    
</body>
<script>
    var btn=document.getElementById('btn')
    var p=document.getElementsByTagName('p')
    var num=0
    btn.onclick=function(){
        num++
        if(num%2==1){
            this.innerHTML='原色'
            for(var i=0;i<p.length;i++){
                if(i%2==1){
                p[i].className='style-red'
                }
            }
        }else{
            this.innerHTML='换色'
            for(var i=0;i<p.length;i++){
                if(i%2==1){
                p[i].className='style-black'
                }
            }
        }
        
    }
</script>
</html>