JavaScript DOM之元素查找與CSS樣式設置
- 2019 年 12 月 30 日
- 筆記
本文目錄
DOM簡介
元素查找CSS樣式設置參考
DOM簡介
元素查找
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> // 頁面載入完成之後,調用的函數 window.onload = function(){ // 根據ID查找元素，快捷鍵：dg var pId = document.getElementById("pId"); console.log(pId); // 獲取當前頁面所有的p標籤 // 根據標籤名查找元素 var pTags = document.getElementsByTagName("p") for (var i = 0; i < pTags.length; i++) { console.log(pTags[i]) } // 根據類名查找元素 var pTags = document.getElementsByClassName("pClass") console.log(pTags.length) } </script> </head> <body> <p class="pClass">這是一個段落</p> <p class="pClass">這是第二個段落</p> <p>這是第3個段落</p> </body> </html>
|
方法 |
描述 |
|---|---|
|
getElementById() |
返回帶有指定 ID 的元素。 |
|
getElementsByTagName() |
返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）。 |
|
getElementsByClassName() |
返回包含帶有指定類名的所有元素的節點列表。 |
CSS樣式設置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1 { width: 100px; height: 100px; background-color: red; border: #FF0000 solid 1px; } </style> </head> <body> <div class="div1"> div1 </div> <div id="div2"> div2 </div> <script type="text/javascript"> // 查找元素 var div2 = document.getElementById("div2") /*屬性的值要使用引號引起來*/ div2.style.height = "100px"; div2.style.width = "100px"; /*在通過DOM設置CSS屬性的時候,如果原來的屬性是由多個單片語成的,此時要使用駝峰命名對應的樣式來設置*/ div2.style.back groundColor = "blue" div2.style.border = "#FF0000 solid 1px" </script> </body> </html>
參考
- w3school在線教程 https://www.w3school.com.cn/
- 黑馬程式設計師 120天全棧區塊鏈開發 開源教程 https://github.com/itheima1/BlockChain
