JavaScript中的DOM基础_1-29 编程练习

最新推荐文章于 2020-06-28 13:06:38 发布

原创最新推荐文章于 2020-06-28 13:06:38 发布 · 390 阅读

1 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

文章标签：

#1-29 编程练习 #DOM基础

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

这篇博客是关于JavaScript中的DOM基础编程练习，要求使用setAttribute()方法为列表项添加样式。练习内容包括通过标签名获取元素，利用循环为列表项的奇数项和偶数项分别设置紫色字体、粉色背景（奇数项）和黄色字体、橘色背景（偶数项）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1-29 编程练习

小伙伴们，我们学习了setAttribute（）方法，那么接下来用setAttribute（）方法来给代码中的列表内容添加样式吧

添加的样式效果如下：

任务

第一步：通过标签名获取元素的方式先得到列表项

Tips：得到的是一个对象集合，本题中需要获得集合中的第一个对象

第二步：利用今天学习的为元素添加指定属性的方法给列表项的奇数项和偶数项分别添加样式

Tips：

（1）用循环的方式去添加

（2）奇数项的样式是：紫色字体，粉色背景

（3）偶数项的样式是：黄色字体，橘色背景

参考答案：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>dom属性</title>
    <style type="text/css">
    .purple{color:purple;background-color:pink;}
    .yellow{color:yellow;background-color:orange;}
    </style>
</head>
<body>
    <h2>网络游戏排名</h2>
    <ul>
       <li>英雄联盟</li>
        <li>魔兽世界</li>
        <li>DOTA</li>
        <li>仙剑奇侠传</li>
        <li>穿越火线</li>
        <li>梦幻西游</li>
    </ul>
    <script type="text/javascript">
        // 补充代码
        var alLi=document.getElementsByTagName("li");
        for(var i=0;i<alLi.length;i++){
            if(i%2==0){
                alLi[i].setAttribute("style","background:pink;color:purple");
               
            }else{
                alLi[i].setAttribute("style","background:orange;color:yellow");
            }
        }
    </script>
</body>
</html>