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