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

  • JavaScript基础回顾知识点记录6-操作元素样式和事件对象(介绍基本使用)已关闭评论
  • 21 次浏览
  • A+
所属分类:Web前端
  • 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>