生活随笔
收集整理的這篇文章主要介紹了
2020-3-26
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
題目一：
JavaScript 獲取第n個(gè)li元素
下面有兩種方法
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<style type
="text/css">
ul
{list
-style
:none
}
</style
>
<script
>
window
.onload=function(){let lis
=document
.getElementsByTagName("li");lis
[1].style
.color
="blue";
}
</script
>
</head
>
<body
><ul
><li
>第一行
</li
><li
>第二行
</li
><li
>第三行
</li
><li
>第四行
</li
></ul
>
</body
>
</html
>
代碼分析如下：
getElementsByTagName方法獲取li元素集合，通過索引即可訪問集合中對(duì)應(yīng)的li元素。索引值是從0開始計(jì)算的，也就是第一個(gè)li元素的索引是0，第二個(gè)是1，以此類推。
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
=" utf-8">
<style type
="text/css">
ul
{list
-style
:none
}
</style
>
<script
>
window
.onload=function(){let li
=document
.querySelector("li:nth-child(2)");li
.style
.color
="blue";
}
</script
>
</head
>
<body
><ul
><li
>第一行
</li
><li
>第二行
</li
><li
>第三行
</li
><li
>第四行
</li
></ul
>
</body
>
</html
>
實(shí)現(xiàn)了同樣的效果，將第二個(gè)li元素字體顏色設(shè)置為藍(lán)色。
上述采用的是HTML5新增的querySelector方法，檢索能力更為強(qiáng)大。
關(guān)于querySelector方法用法參閱querySelector()
方法。
關(guān)于方法中的選擇器參閱CSS E:nth-child(n)一章節(jié)。
總結(jié)
以上是生活随笔為你收集整理的2020-3-26的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
