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
