生活随笔
收集整理的這篇文章主要介紹了
2020-3-26
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
題目一：
JavaScript 獲取第n個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元素集合，通過索引即可訪問集合中對應的li元素。索引值是從0開始計算的，也就是第一個li元素的索引是0，第二個是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
>
實現了同樣的效果，將第二個li元素字體顏色設置為藍色。
上述采用的是HTML5新增的querySelector方法，檢索能力更為強大。
關于querySelector方法用法參閱querySelector()
方法。
關于方法中的選擇器參閱CSS E:nth-child(n)一章節。
總結
以上是生活随笔為你收集整理的2020-3-26的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
