700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JavaScript遍历标签(遍历DOM数组)

JavaScript遍历标签(遍历DOM数组)

时间:2024-06-21 15:48:38

相关推荐

JavaScript遍历标签(遍历DOM数组)

很多时候我们经常会同时操作多个DOM对象,此时,可以使用循环来遍历DOM数组。

假如我们有这样的需求:

把所有的p标签的字体变为蓝色,字体大小为25px

把列表的奇数行的颜色变为红色

样例代码:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><p>这是第一个p标签</p> <p>这是第二个p标签</p><p>这是第三个p标签</p><p>这是第四个p标签</p><p>这是第五个p标签</p><p>这是第六个p标签</p><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><script>let arrp = document.getElementsByTagName('p');let arrl = document.getElementsByTagName('li');for(let i=0;i<arrp.length;i++){arrp[i].style.color = 'blue';arrp[i].style.fontSize = '25px';}for(let i=0;i<arrl.length;i++){if(i%2==0){// 下标是从0开始的,所以arrl[0]是第一行arrl[i].style.color='red';}}</script></body></html>

效果截图:

写作不易,读完如果对你有帮助,感谢点赞支持!

如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

加油!

共同努力!

Keafmd

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。
相关阅读
js通过dom遍历标签选项卡

js通过dom遍历标签选项卡

2022-04-01

javascript DOM 遍历

javascript DOM 遍历

2018-09-23

JavaScript 遍历DOM

JavaScript 遍历DOM

2024-01-24

JavaScript遍历DOM

JavaScript遍历DOM

2024-01-08