JavaScript getElementById 使用方法及用法
getElementById()是JavaScript中用于按ID获取HTML元素的方法。本文详细介绍了getElementById()的使用方法及用法。
使用方法
- 在HTML代码中（通常在或中）指定元素ID，例如：
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeader">Welcome to my website!</h1>
<p>Some text.</p>
<p>More text.</p>
</body>
</html>
- 在JavaScript代码中，使用document对象的
getElementById()方法获取元素，例如：
var header = document.getElementById("myHeader");
用法
通过getElementById() 获得的HTML元素对象，可以用来访问该元素的属性，或者调用元素对象的方法进行操作。以下是两个常见的对元素对象的操作示例：
示例1：修改元素内容
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeader">Welcome to my website!</h1>
<button onclick="changeText()">Change text</button>
<script>
function changeText() {
var header = document.getElementById("myHeader");
header.innerHTML = "Hello World!";
}
</script>
</body>
</html>
在此示例中，当用户单击“Change text”按钮时，JavaScript函数 changeText() 会获取元素对象<h1 id="myHeader">，并使用innerHTML 属性将其内容修改为Hello World!。
示例2：修改元素样式
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeader">Welcome to my website!</h1>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
var header = document.getElementById("myHeader");
header.style.color = "red";
header.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
在此示例中，当用户单击“Change Style”按钮时，JavaScript函数changeStyle()会获取元素对象<h1 id="myHeader">，并使用style属性修改其样式（颜色和背景颜色）。
结论
通过getElementById()方法获取HTML元素对象，我们可以使用JavaScript非常方便地操作HTML内容和样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript getElementById 使用方法及用法 - Python技术站
微信扫一扫 
支付宝扫一扫 