猿问

为什么出来的不是想要的效果?

<style type="text/css">
    #div1{
        width: 400px;
        height: 300px;
        border: 1px solid skyblue;
    }
    p{
        border: 1px solid lightpink;
    }
    .ps1{
        border: 1px solid red;
        text-align: center;
    }
</style>
<input type="button" value="按钮" id="btn" />
<div id="div1">
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
    <p class="ps">我是一个段落</p>
</div>
<script type="text/javascript">
    //获取按钮
    document.getElementById("btn").onclick=function () {
        //根据className获取P
        var pObj=document.getElementsByClassName("ps");
        for (var i=0;i<pObj.length;i++){
            pObj[i].className="ps1";
        }
    }
</script>

https://img.mukewang.com/5c36f9b50001bcb704290351.jpg

为什么最后出来的效果是这样的?不是每个p标签都应用了ps1类样式,而是跳过一个p应用一个。

大大大大大茹
浏览 96回答 1
1回答

pardon110

问题在于循环体内的代码改变了循环对象,采用了不正确的循环方式。简单点讲,循环内的pObj[i].className = 'ps1' 这句改变了ps类名所在的元素,间接导致pobj对象的length属性发生改变,其元素也发生改变。即按照你所写循环,当第一轮循环i=0时,pObj.length=6,pObj内为6个页面内样式为ps的段落元素集合i=1时,pObj.length=5,pObj对象为此时页面内5个样式为ps的段落元素集合,即此时[1]索引指向的为最开始(i=0时)pObj中的第三个元素....导致的结果:一次按钮,改变的是最开始的第1 3 5三个段落的样式若想得到你想要的效果,循环体内应该这样写for (var i = pObj.length-1; i >= 0; i--) {     console.log(pObj.length);     // 6,5,4,3,2,1     pObj[i].className = "ps1";    // 改变了pObj对象元素 ,将样式类名由ps改为了ps1 }
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答