基础（四）"/>
DOM基础（四）
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>更多推荐
DOM基础（四）
发布评论