教你如何通过JavaScript读取元素的样式

目录

• 一、getComputedStyle()
• 1、getComputedStyle()是window的方法，可以获取元素当前的样式
• 2、两个参数
• 3、代码实例
• 4、浏览器效果
• 二、定义一个方法获取元素信息
• 1、代码实例
• 2、浏览器显示
• 三、clientWidth和clientHeight
• 1、这两个元素是获取元素的宽度和高度，不带px
• 2、这两个元素是只读的，不可修改
• 3、代码实例
• 4、浏览器展示
• 四、offsetWidth和offsetHeight
• 1、获取元素的整个的宽度和高度，包括内容区、内边距和边框
• 2、代码实例
• 3、浏览器展示
• 五、offsetParent
• 1、获取当前元素的父元素
• 2、代码实例
• 3、浏览器展示
• 六、offsetLeft和offsetTop
• 1、offsetLeft
• 2、offsetTop
• 七、scrollWidth和scrollHeight
• 1、scrollWidth
• 2、scrollHeight
• 八、scrollLeft和scrollTop
• 1、scrollLeft
• 2、scrollTop
• 九、 事件的冒泡
• 1、 事件的冒泡指的是事件的向上传递，当后代元素的事件被触发时，其父元素的相同事件也会被触发。
• 2、可以通过设置，取消事件的冒泡
• 3、代码实例
• 4、浏览器展示
• 总结

一、getComputedStyle()

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

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

语法

let style = window.getComputedStyle(element, [pseudoElt]);

2、两个参数

要获取样式的元素

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

3、代码实例

	
		
		
		
		
		
	
	
		戳我一下
		


		

	

4、浏览器效果

备注：IE无效

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

1、代码实例

	
		
		
		
		
		
	
	
		戳我一下
		


		

	

2、浏览器显示

三、clientWidth和clientHeight

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

 

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

 

3、代码实例

	
		
		
		
		
	
	
		亲我一下
		

	

4、浏览器展示

四、offsetWidth和offsetHeight

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

 

2、代码实例

	
		
		
		
		
	
	
		亲我一下
		


		

	

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、代码实例

	
		
		
		
		
	
	
		
		

			我是哪吒
			我是云韵
		
		
	

4、浏览器展示

 

总结

到此这篇关于JavaScript读取元素的样式的文章就介绍到这了,更多相关JavaScript读取元素的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！