JS控制DOM的类及交互深入

<!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>

智群王

发布了64 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注

JS控制DOM的类及交互深入

猜你喜欢