Javascript 获取 HTML CSS元素的方式
最新回答
蓝雨希
2026-10-29 15:51:18
在JavaScript中，获取HTML和CSS元素有多种方式，以下是一些常用的方法：
获取HTML元素通过ID获取元素：
使用document.getElementById()方法，传入元素的ID作为参数。
示例：
const elementById = document.getElementById('elementId');通过类名获取元素：
使用document.getElementsByClassName()方法，传入元素的类名作为参数。这会返回一个HTMLCollection，包含所有匹配的元素。
示例：
const elementsByClass = document.getElementsByClassName('className');通过标签名获取元素：
使用document.getElementsByTagName()方法，传入元素的标签名作为参数。这会返回一个HTMLCollection，包含所有匹配的元素。
示例：
const elementsByTag = document.getElementsByTagName('div');使用CSS选择器获取元素：
使用document.querySelector()方法，传入CSS选择器作为参数。这会返回匹配的第一个元素。
使用document.querySelectorAll()方法，传入CSS选择器作为参数。这会返回一个NodeList，包含所有匹配的元素。
示例：
const elementByQuery = document.querySelector('.className');const elementsByQueryAll = document.querySelectorAll('div.className');
获取元素的计算样式：
使用window.getComputedStyle()方法，传入元素作为参数。这会返回一个包含元素所有计算样式的对象。
示例：
const element = document.getElementById('elementId');const styles = window.getComputedStyle(element);console.log(styles.color); // 获取元素的文字颜色直接访问元素的style属性：
通过元素的style属性可以直接访问和修改内联样式。
示例：
const element = document.getElementById('elementId');element.style.color = 'red'; // 设置元素的文字颜色为红色
以下是一个综合示例，展示了如何获取元素并修改其样式：
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <style> .box { color: blue; font-size: 16px; } </style></head><body> <div id="bo">afgsdlsi</div> <div class="box">世界是美丽的</div> <script> // 通过ID获取元素 const elementById = document.getElementById('bo'); console.log(elementById.innerText); elementById.innerText = "我是男孩子"; // 通过类名获取元素 const elementsByClass = document.getElementsByClassName('box'); console.log(elementsByClass[0].innerText); elementsByClass[0].innerText = "修改后的文本"; // 使用CSS选择器获取元素 const elementByQuery = document.querySelector('.box'); console.log(elementByQuery.innerText); elementByQuery.innerHTML = "<strong>花花世界</strong>"; // 获取元素的计算样式 const computedStyle = window.getComputedStyle(elementByQuery); console.log(computedStyle.color); // 输出: rgb(0, 0, 255) // 直接修改元素的style属性 elementByQuery.style.color = 'red'; elementByQuery.style.fontSize = '20px'; </script></body></html>总结- 获取元素：可以使用getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等方法。
- 获取样式：可以使用getComputedStyle方法获取计算样式，或直接通过style属性访问和修改内联样式。
这些方法提供了灵活的方式来操作DOM元素和样式，可以根据具体需求选择合适的方法。
热门标签
