JavaScript中getElementById()方法怎么用?

getElementById()方法返回传递给函数的具有给定ID的元素。该方法广泛应用于网页设计中,用于改变任何特定元素的值或获取特定元素。如果传递给函数的ID不存在,则返回null。

getElementById()方法的使用

语法:

document.getElementById( element_ID )

参数:该函数接受单个参数element_ID,用于保存元素的ID。

返回值:返回给定ID的对象。如果传递给函数的ID不存在,则返回null。

示例1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script>  
        // 用于更改元素颜色的函数
        function hello() { 
            var demo = document.getElementById("hello"); 
            demo.style.color = "red"; 
        }  
        </script>  
    </head>  
      
    <body style = "text-align:center"> 
      
        <h1 id = "hello">Hello world!</h1> 
          
        <h2>getElementById()方法</h2> 
          
        <!-- Click on the button to change color -->
        <input type = "button" onclick = "hello()"
            value = "单击此处,更改颜色" /> 
    </body>  
</html>

效果图:

1.gif

示例2:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script>
			// 更改元素内容的函数
			function hello() {
				var demo = document.getElementById("hello");
				demo.innerHTML = "Welcome!";
			}
		</script>
	</head>

	<body style="text-align:center">

		<h1 id="hello">Hello world!</h1>

		<h2>getElementById()方法</h2>

		<input type="button" onclick="hello()" value="单击此处,更改内容" />
	</body>

</html>

效果图:

2.gif

以上就是JavaScript中getElementById()方法怎么用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏