JavaScript 獲取第n個li元素
本文介紹一下如何利用JavaScript獲取li元素列表中的第n個li元素。
隨著HTML5的出現,獲取的手段也逐漸增多,下面分享一下其中的兩種。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <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>
程式碼執行效果截圖如下:
上面程式碼將第二個li元素字型顏色設定為藍色,程式碼分析如下:
(1).getElementsByTagName方法獲取li元素集合,通過索引即可訪問集合中對應的li元素。
(2).索引值是從0開始計算的,也就是第一個li元素的索引是0,第二個是1,以此類推。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <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)一章節。
相關文章
- jquery獲取指定li元素後面的第n個li元素jQuery
- JavaScript獲取當前li元素是第幾個JavaScript
- javascript獲取li列表中的第幾個liJavaScript
- jQuery查詢第n個li元素jQuery
- JavaScript 獲取倒數第二個li元素JavaScript
- JavaScript獲取倒數第二個li元素JavaScript
- jQuery在元素集合中獲取第N個元素jQuery
- JavaScript獲取li元素的下標JavaScript
- 獲取陣列第N個元素的方法陣列
- CSS 倒數第n個li元素樣式CSS
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- jquery如何獲取li元素的前n個程式碼例項jQuery
- JavaScript獲取當前li元素的索引位置JavaScript索引
- javascript獲取li元素內容程式碼例項JavaScript
- jQuery獲取當前li元素的下一個元素jQuery
- css匹配第n個li元素CSS
- CSS 設定從第n個開始li元素樣式CSS
- jQuery怎麼獲取li列表中的第幾個lijQuery
- css 獲取從第n個開始,之後的所有元素CSS
- 獲取ul元素下的所有li元素
- javascript獲取當前li元素在集合中的位置JavaScript
- 獲取div元素下li元素的數目
- jQuery獲取li元素後面所有兄弟元素jQuery
- JavaScript獲取上一個元素JavaScript
- CSS 第2個li元素樣式CSS
- CSS 設定前n個li元素樣式CSS
- 獲取指定元素下所有li元素程式碼例項
- jQuery實現的獲取m到n之間的li元素程式碼例項jQuery
- 用jQuery獲取指定前幾個li元素程式碼例項jQuery
- css匹配第n個li元素程式碼例項CSS
- javascript如何獲取哪個元素獲得焦點JavaScript
- 獲取當前li是第幾個的程式碼例項
- javascript實現的獲取下一個li元素程式碼例項JavaScript
- jQuery獲取指定的li元素程式碼例項jQuery
- jquery如何獲取大於指定索引的li元素jQuery索引
- jQuery獲取所有的li元素程式碼例項jQuery
- jQuery點選的是第幾個li元素jQuery