JavaScript基础回顾知识点记录6-操作元素样式和事件对象（介绍基本使用）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

js 中操作元素样式

通过js修改元素内联样式（设置和读取的都是内联样式）

获取当前元素显示的样式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box1 {
			width: 200px;
			height: 200px;
			background-color: aquamarine;
		}
	</style>
	<body>
		<button type="button" id="btn1">点我下1</button>
		<button type="button" id="btn2">点我下2</button>
		<button type="button" id="btn3">点我下3</button>
		<br><br>
		<div id="box1">

		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var btn01 = document.getElementById("btn1");
			var box01 = document.getElementById("box1");
			btn01.onclick = function() {
				/*
				通过js修改元素内联样式:  
					语法:  元素对象.style.样式名 = 样式值
					样式名： background-color 是不符合的， 需要改为驼峰命名： backgroundColor
					注意： 这种方法设置和读取的都是内联样式
				*/
				box01.style.width = "400px";
				box01.style.height = "400px";
				box01.style.backgroundColor = "red";
			}
			/*
			获取当前元素显示的样式：
				语法: 元素对象.currentStyle.样式名  。 此方法只有IE浏览器支持
				其他浏览器获取样式： getComputedStyle(元素对象,null).样式名 ;
								
			*/
			var btn2 = document.getElementById("btn2");
			btn2.onclick = function() {
				alert(box01.currentStyle.width);
			}

			var btn3 = document.getElementById("btn3");
			btn3.onclick = function() {
				var style_obj = getComputedStyle(box1, null);
				alert(style_obj.width);
			}
		}
	</script>
</html>

js 中事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
注意: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。事件对象是作为window对象的属性来存储的。

以一个鼠标移入某个区域后显示x、y坐标为例子

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#areaDiv {
			width: 200px;
			height: 100px;
			border: black 3px solid;
			margin-bottom: 10px;
		}

		#showMsg {
			width: 200px;
			height: 30px;
			border: black 3px solid;
		}
	</style>
	<body>
		<div id="areaDiv"></div>
		<div id="showMsg"></div>
	</body>
	<script type="text/javascript">
		var areaDiv = document.getElementById('areaDiv');
		var showMsg = document.getElementById('showMsg');

		/*
			 onmousemove 事件： 鼠标在元素中移动时触发
			 事件对象： 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
				在这个事件对象中封装了当前事件相关的一切信息（鼠标的坐标、键盘那个键被按下，鼠标滚动的方向等）
			 note: 在ie8及以下浏览器中，响应函数触发时，不会传递事件对象。 事件对象是作为window对象的属性来存储的。
			 
		*/

		areaDiv.onmousemove = function(e) {
			// 解决事件对象兼容性问题： 两种写法：
			// if (!e) {
			// 	e = window.e;
			// }
			e = e || window.e;
			showMsg.innerHTML = 'x坐标：' + e.clientX + ',y坐标：' + e.clientY;
		}

		areaDiv.onmouseout = function() {
			showMsg.innerHTML = '';
		}
	</script>
</html>

鼠标移动事件，实现某个div跟随鼠标移动（复制代码运行直接看效果更直观）

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box {
			position: absolute;
			width: 50px;
			height: 50px;
			background-color: #7FFFD4;
		}
	</style>
	<body style="height: 1200px;">
		<div id="box">

		</div>
	</body>
	<script type="text/javascript">
		/*
			clientX 和 clientY 是获取当前可见页窗口的坐标
			pageX 和 pageY 是获取相对当前页面的坐标 （当页面可以往下滚动时，需要使用这个获取坐标）,但是在IE8中不支持
		*/
		document.onmousemove = function(e) {
			/*
				获取滚动条高度
				IE和火狐不识别滚动条属于body的， 谷歌、edge可以识别。
				IE和火狐认为滚动条属于html的。documentElement，但是edge识别不了html的滚动条
			*/
			var st = document.body.scrollTop || document.documentElement.scrollTop;
			e = e || window.e;
			var box = document.getElementById('box');
			box.style.left = e.clientX + 'px';
			box.style.top = e.clientY + st + 'px';
		}
	</script>
</html>