JavaScript进阶如何在JavaScript中获取和控制HTML元素（详细讲解）

最新推荐文章于 2024-06-28 16:40:55 发布

客行.

最新推荐文章于 2024-06-28 16:40:55 发布

阅读量2.8k

点赞数 9

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_65725031/article/details/123208129

版权

本文详细介绍了如何在JavaScript中获取和控制HTML元素，包括通过id、标签名和class属性的方法，以及利用display和opacity控制元素显示。同时，文章还提及了常用的HTML元素事件，如onclick、onfocus、onblur、onmouseover和onmouseout，并提供相关练习题巩固所学知识。

摘要由CSDN通过智能技术生成

家人们，时隔一天带着新的知识来与大家见面啦！今天我们学习的是如何在我们JS中获取和控制HTML元素，大家想要学好JavaScript要坚持不懈的学下去噢，有什么不懂的可以私信我，或者在下面评论，看到了一定会回复噢。

一.如何在JS中获取HTML元素

1.通过标签中的id属性（getElementById）

通过标签中的id属性获取HTML元素，首先给我们的标签设置一个id名字，我们直接使用标签的id名字操作HTML属性，给大家来一道开胃小菜，使用我们的JS制作图片自动切换效果，给大家上代码。

下面代码中通过id获取属性：a1.style.backgroundImage 这是简写

a1:<div>标签设置的id名 style:样式 backgroundImage:背景图片

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		div{
		    width:100px;
			height:200px;
			/* url:位置 */
			background:url("images/a0.jpg") center/cover;
		}
		</style>
	</head>
	<body>	
	
	<!-- 制作图片自动切换效果-->
	<!-- 1.想完成这个效果希望大家把图片的格式是a1,a2这种格式方便我们使用 -->
	<div id="a1"></div>

	<script>
	 //定义一个变量
	 var b=1;
	 //使用循环计时器让我们的图片切换
	 setInterval(function fn1(){
		 a1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")';
		//每执行一次b就加上1
	  b++;
	 },1000)
	</script>
	</body>
</html>

我们的一个标准的通过id获取html元素的写法 ,当点击按钮时换颜色

var d=document.getElementById("d1") //拿到要换颜色的div标签的id赋值给d
d.style.background="yellow"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		div{
			/* 设置宽*/
			width:100px;
			/* 设置高 */
			height:100px;
			/* 设置背景颜色 */
			background:red;
		    display: inline-block;
		}
		
		</style>
	</head>
	<body>
<!-- 如何在JS中获取HTML元素 -->
     <div id="d1"></div>
	 <div></div>
	 <div></div>
	 <!-- br跨行标签 -->
	 <br>
	 <button onclick="fn1()" >通过id更改颜色</button>
	
	 <script>
	 
	    //一.通过标签中的id属性
	    function fn1() {
	    //直接使用id
	    // d1.style.background="blue"
	
	    // Element 元素(标签)
	    var d=document.getElementById("d1")
	    d.style.background="yellow"
	    }
	 
	 </script>
	</body>
</html>

图片的放置位置：下载你需要的图片，把图片放进一个文件夹，然后把文件夹移入进来

2.通过标签名(getElementsByTagName)

当我们想要修改的数据比较多时，就可以使用通过标签名获取HTML元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset

最低0.47元/天解锁文章

客行.

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript进阶 如何在JavaScript中获取和控制HTML元素（详细讲解）

一.如何在JS中获取HTML元素

1.通过标签中的id属性（getElementById）

2.通过标签名(getElementsByTagName)

JavaScript进阶如何在JavaScript中获取和控制HTML元素（详细讲解）