大学资料-DOM基础（四）

大学生资料阁 2020-09-10

465

DOM属性的设置与获取

获取属性

语法：
ele.getAttribute("attribute")
功能：
获取ele元素的attribute
说明：
1. ele是要操作的DOM对象
2. attribute是要获取的html属性（如：id、type）

设置属性

语法：
ele.setAttribute("attribute",value)
功能：
在ele元素上设置属性
说明：
1. ele是要操作的DOM对象
2. attribute为要设置的属性名称
3. value为设置的attribute属性的值

编程练习 1

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

添加的样式效果如下：

任务

第一步：通过标签名获取元素的方式先得到列表项，注意得到的是一个对象集合

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

任务提示

用循环的方式去添加
奇数项的样式是：紫色字体，粉色背景
偶数项的样式是：黄色字体，橘色背景

参考代码

<!DOCTYPE html>
<html>
  <head>
    <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">
      ul=document.getElementsByTagName("ul");
      lis=ul[0].getElementsByTagName("li");
      for(var i=0;i<lis.length;i+=2){
        lis[i].setAttribute("class","purple");
      }
      for(var i=1;i<lis.length;i+=2){
        lis[i].setAttribute("class","yellow");
      }
</script>
  </body>
</html>

数据库

最后修改时间：2020-09-23 18:24:52

文章转载自大学生资料阁，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。