JS控制DOM的类及交互深入

最新推荐文章于 2022-01-13 17:39:22 发布

星雨流星天

最新推荐文章于 2022-01-13 17:39:22 发布

阅读量138

点赞数

分类专栏： js7天训练营

本文链接：https://blog.csdn.net/qq_40839934/article/details/86323717

版权

js7天训练营专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
	</head>
	<body>
		<div class="a1">1</div>
		<div class="a1">2</div>
		<div class="a1">3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByClassName('a1');
		console.log(aDiv[0].className);
	</script>
	</body>
</html>

className 可以返回元素标签上到class内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
.a2{	width: 200px;
	    height: 200px;
		background: red;
		color: green;
}	
		</style>
	</head>
	<body>
		<div class="a1">1</div>
		<div class="a1">2</div>
		<div class="a1">3</div>
	<script type="text/javascript">
		var aDiv = document.getElementsByClassName('a1');
		aDiv[0].className = 'a2 a1';
	</script>
	</body>
</html>

改变类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
*{margin: 0;padding: 0;}
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
	}
.a2{	width: 200px;
	    height: 200px;
		background: red;
		color: green;
}	
		</style>
	</head>
	<body>
		<div id="myDiv"></div>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		myDiv.onmouseover = function(){
			myDiv.style.background = 'blue';
		};
		myDiv.onmouseout = function(){
			myDiv.style.background = 'black';
		};
	</script>
	</body>
</html>

光标进入与移除，颜色不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
*{margin: 0;padding: 0;}
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
		color: white;
	}
.a2{	width: 200px;
	    height: 200px;
		background: red;
		color: green;
}	
		</style>
	</head>
	<body>
		<div id="myDiv"></div>
	<script type="text/javascript">
		var myDiv = document.getElementById('myDiv');
		myDiv.onmouseover = function(){
			myDiv.style.background = 'blue';
			myDiv.innerHTML = '已经移入';
		};
		myDiv.onmouseout = function(){
			myDiv.style.background = 'black';
			myDiv.innerHTML = '没有移入'
		};
	</script>
	</body>
</html>

光标移入与移出有字体提示

onmouseover ->鼠标移入

onmouseout ->鼠标移除

window.οnresize=>浏览器大小发生改变时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			htmlbiaoqian111
		</title>
		<style type="text/css">
*{margin: 0;padding: 0;}
#myDiv{ width: 100px;
	    height: 100px;
		background: black;
		color: white;
	}
.a2{	width: 200px;
	    height: 200px;
		background: red;
		color: green;
}	
		</style>
	</head>
	<body>
		<div id="myDiv"></div>
	<script type="text/javascript">
		window.onresize = function(){
			console.log(1);
		};
	</script>
	</body>
</html>

星雨流星天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS控制DOM的类及交互深入

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt; htmlbiaoqian111 &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=
复制链接

扫一扫

专栏目录