DOM基础(四) £神魔★判官ぃ 2023-05-28 14:16 3阅读 0赞 # 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()方法来给代码中的列表内容添加样式吧。 添加的样式效果如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center] #### 任务 #### 第一步:通过标签名获取元素的方式先得到列表项,注意得到的是一个对象集合 第二步:利用今天学习的为元素添加指定属性的方法,给列表项的奇数项和偶数项分别添加样式 #### 任务提示 #### 1. 用循环的方式去添加 2. 奇数项的样式是:紫色字体,粉色背景 3. 偶数项的样式是:黄色字体,橘色背景 #### 参考代码 #### <!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> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_0_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTMzMTky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/e0822411b98643c7a20e591db41860a8.png
相关 DOM基础 DOM查找 -------------------- JavaScript DOM基础 DOM是Document Object Model(文档对象模型)的缩写 Myth丶恋晨/ 2023年07月17日 14:02/ 0 赞/ 32 阅读
相关 DOM基础(四) DOM属性的设置与获取 -------------------- 获取属性 语法: ele.getAttribute("attribute £神魔★判官ぃ/ 2023年05月28日 14:16/ 0 赞/ 4 阅读
相关 dom基础8 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 素颜马尾好姑娘i/ 2022年05月01日 12:12/ 0 赞/ 185 阅读
相关 dom基础4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 约定不等于承诺〃/ 2022年01月20日 14:47/ 0 赞/ 216 阅读
相关 dom基础3 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 骑猪看日落/ 2022年01月20日 14:27/ 0 赞/ 242 阅读
相关 dom基础2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti r囧r小猫/ 2022年01月20日 14:25/ 0 赞/ 222 阅读
相关 dom基础1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 矫情吗;*/ 2022年01月20日 14:05/ 0 赞/ 207 阅读
相关 dom基础7 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 落日映苍穹つ/ 2022年01月19日 05:45/ 0 赞/ 191 阅读
相关 dom基础6 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 梦里梦外;/ 2022年01月19日 02:15/ 0 赞/ 207 阅读
相关 dom基础5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti 傷城~/ 2022年01月19日 01:11/ 0 赞/ 250 阅读
还没有评论,来说两句吧...