1-15setAtrribute

<body>

<h2>网络游戏排名</h2>

<ul>

<li>仙剑奇侠传</li>

</ul>

</body>

var li=getElementsByTagName("li");

//偶数项

for(var i=0;i<li.length;i+2){

var li1=getElementsByTagName("li");

li1.setAtrribute("color","purple");

li2.setAtrribute("backgroundColor","pink");

}

//奇数项

for(var a=1;a<li.length;a+2){

var li2=getElementsByTagName("li");

li2.setAtrribute("color","yellow");

li2.setAtrribute("backgroundColor","orange");

}

//?????l老师哪里错了显示不出来？？？？为什么

慕丝7347533 2017-10-29

源自：JavaScript DOM基础 1-24 编程练习

收起

3回答

好帮手慕糖 2017-12-12 17:45:52

你好，不需要使用xxx.style.xxxx="xxx"也可以完成呀，因为定义的有id已经class，分别添加就可以了哦。例：如下：

for (var i = 0; i < lis.length; i++) {
    if (i % 2 == 0) { 
        lis[i].setAttribute("id","purple");
        lis[i].setAttribute("class", "pink");
    } else { 
        lis[i].setAttribute("id", "yellow");
        lis[i].setAttribute("class", "orange");
    }
}

祝学习愉快~

收起回答

小丸子爱吃菜 2017-11-01 09:32:12

祝学习愉快！

收起回答

提问者慕丝7347533 #1

谢谢老师啦么么哒

2017-11-05 11:03:19
西瓜萝卜 #2

按照老师这样的写法，setAttribute()方法只会显示最后一个调用，两个setAttribute()方法不能同时存在，后一个会覆盖前一个。这道题给了一个坑，要实现那个效果，只能是setAttribute()和xxx.style.xxxx="xxx"一起配合使用。

2017-12-12 17:21:23

樱桃小胖子 2017-10-30 11:52:06

var li = document.getElementsByTagName("li");
var li1 = document.getElementsByTagName("li");
var li2 = document.getElementsByTagName("li");

要加上document.即

var li = document.getElementsByTagName("li");
var li1 = document.getElementsByTagName("li");
var li2 = document.getElementsByTagName("li");

另外，setAttribute("id/class属性","id/class名")，然后还要在css中设置相应的id或者class 的样式，不能直接使用setAttribute设置样式。

另外奇数、偶数建议使用以下方式进行判断循环:

for(var i=0;i<lis.length;i++){
        if(i%2==0){
            lis[i].setAttribute("class","purple"); 
        }
        else{
           lis[i].setAttribute("class","yellow"); 
        }
    }

希望可以帮到你~

收起回答

提问者慕丝7347533 #1

<head> <meta charset="UTF-8"> <title>用setAttribute给代码的列表添加样式</title> <style type="text/css"> #purple{color:purple;} #yellow{color:lightyellow;} .pink{background-color:pink;} .orange{background-color:orange;} </style> </head> <body> <h2>网络游戏排名</h2> <ul> <li>英雄联盟</li> <li>魔兽世界</li> <li>DOTA</li> <li>仙剑奇侠传</li> <li>穿越火线</li> <li>梦幻西游</li> </ul> </body> <script type="text/javascript"> var lis=document.getElementsByTagName("li"); console.log(lis); //偶数项 for(var i=0;i<lis.length;i++){ if(i%2==0){//偶数项获取 lis[i].setAttribute("color","purple"); lis[i].setAtrribute("background-color","pink"); }else{//奇数项获取 lis[i].setAtrribute("color","yellow"); lis[i].setAtrribute("background-color","orange"); } } </script>、///????老师还是显示不了，哪里错了？？？？？

2017-11-01 08:55:22