很多时候我们经常会同时操作多个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