JavaScript零基础入门 9：JavaScript读取元素的样式

哪吒

已于 2022-02-01 13:08:46 修改

阅读量5.4k

点赞数 54

分类专栏： JavaScript与Vue基础教程系列文章标签： javascript java 前端

于 2021-12-23 07:56:11 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/guorui_java/article/details/122011476

版权

JavaScript与Vue基础教程系列专栏收录该内容

39 篇文章 119 订阅

订阅专栏

🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

一、getComputedStyle()

1、getComputedStyle()是window的方法，可以获取元素当前的样式

2、两个参数

要获取样式的元素
可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。

3、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 120px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
		
			window.onload = function(){
				
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					var obj = getComputedStyle(box1,null);
					
					alert(getComputedStyle(box1,null).width);

				};
			};
		</script>
	</head>
	<body>
		<button id="btn01">戳我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

4、浏览器效果

在这里插入图片描述
备注：IE无效

二、定义一个方法获取元素信息

1、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 120px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					// 定义一个函数，用来获取指定元素的当前的样式
					var ret = getBoxStyle(box1,"width");
					alert(ret);
				};
				
			};
			
			/*
			 * 参数：
			 * obj 要获取样式的元素
			 * name 要获取的样式名
			 */
			function getBoxStyle(obj , name){
				
				if(window.getComputedStyle){
					//谷歌/edge浏览器，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE没有getComputedStyle()方法，下面为IE8的方式
					return obj.currentStyle[name];
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">戳我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

2、浏览器显示

在这里插入图片描述

三、clientWidth和clientHeight

1、这两个元素是获取元素的宽度和高度，不带px

2、这两个元素是只读的，不可修改

3、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 120px;
				height: 150px;
				background-color: red;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					alert(box1.clientWidth);
					alert(box1.clientHeight);
				};
			};
		</script>
	</head>
	<body id="body">
		<button id="btn01">亲我一下</button>
		<div id="box1"></div>
	</body>
</html>

4、浏览器展示

在这里插入图片描述

四、offsetWidth和offsetHeight

1、获取元素的整个的宽度和高度，包括内容区、内边距和边框

2、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				
				btn01.onclick = function(){
					/*
					 * offsetWidth
					 * offsetHeight
					 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
					 */
					alert(box1.offsetWidth);
				};
			};
		</script>
	</head>
	<body id="body">
		<button id="btn01">亲我一下</button>
		<br /><br />
		<div id="box1"></div>
	</body>
</html>

3、浏览器展示

在这里插入图片描述

五、offsetParent

1、获取当前元素的父元素

2、代码实例

 var op = box1.offsetParent;
 alert(op.id);

3、浏览器展示

在这里插入图片描述

六、offsetLeft和offsetTop

1、offsetLeft

当前元素相对于其定位父元素的水平偏移量

2、offsetTop

当前元素相对于其定位父元素的垂直偏移量

七、scrollWidth和scrollHeight

1、scrollWidth

可以获取元素整个滚动区域的宽度

2、scrollHeight

可以获取元素整个滚动区域的高度

八、scrollLeft和scrollTop

1、scrollLeft

获取水平滚动条滚动的距离

2、scrollTop

获取垂直滚动条滚动的距离

当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了。

当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了。

九、事件的冒泡

1、事件的冒泡指的是事件的向上传递，当后代元素的事件被触发时，其父元素的相同事件也会被触发。

2、可以通过设置，取消事件的冒泡

3、代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#nz{
				width: 200px;
				height: 100px;
				background-color: rgb(205, 112, 50);
			}
			
			#yy{
				background-color: yellow;
			}
			
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				//为云韵绑定一个单击响应函数
				var yy = document.getElementById("yy");
				yy.onclick = function(event){
					event = event || window.event;

					alert("我是云韵");
					
					//取消冒泡
					//可以将事件对象的cancelBubble设置为true，即可取消冒泡
					//event.cancelBubble = true;
				};
				
				//为哪吒绑定一个单击响应函数
				var nz = document.getElementById("nz");
				nz.onclick = function(event){
					event = event || window.event;
					
					alert("我是哪吒");
					
					event.cancelBubble = true;
				};
				
				//为body绑定一个单击响应函数
				document.body.onclick = function(){
					alert("我是body的单击响应函数");
				};		
			};
		</script>
	</head>
	<body>
		
		<div id="nz">
			我是哪吒
			<span id="yy">我是云韵</span>
		</div>
		
	</body>
</html>

4、浏览器展示

在这里插入图片描述

🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

上一篇：JavaScript零基础入门 8：document获取节点元素
下一篇：敬请期待

在这里插入图片描述

哪吒

关注

54
点赞
踩
58

收藏

觉得还不错? 一键收藏
打赏
53
评论
JavaScript零基础入门 9：JavaScript读取元素的样式

一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数要获取样式的元素可以传递一个伪元素，一般都传null该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。3、代码实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"&
复制链接

扫一扫