首页 > 资讯 > 前端开发 > JavaScript >教你如何通过JavaScript读取元素的样式

374

分享到

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

2024-04-02 19:04:59 374人浏览薄情痞子

摘要

目录一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数3、代码实例4、浏览器效果二、定义一个方法

一、getComputedStyle()

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

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

语法

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

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);
				};
				
			};
			
			
			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(){
					
					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、浏览器展示

总结

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 教你如何通过JavaScript读取元素的样式

本文链接: https://www.lsjlt.com/news/163213.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数3、代码实例4、浏览器效果二、定义一个方法...

99+

2024-04-02
JavaScript如何获取元素样式

这篇文章主要为大家展示了“JavaScript如何获取元素样式”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何获取元素样式”这篇文章吧。获取元素样式// 获取样式...

99+

2023-06-03
JavaScript操作元素教你改变页面内容样式

目录1、操作元素1.1、改变元素内容1.2、innerText和innerHtml的区别1.3、操作元素修改元素属性1.4、分时显示时间案例1.5、表单的属性操作1.6、仿京东隐藏...

99+

2024-04-02
教你如何使用 JavaScript 读取文件

目录使用 JavaScript 读取文件概述选择带有输入元素的文件处理输入元素的变化事件从输入元素的 files 属性中获取一个 File 对象使用 FileReader 读取 Fi...

99+

2024-04-02
如何解决读取style元素定义样式表的兼容问题

本篇内容主要讲解“如何解决读取style元素定义样式表的兼容问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何解决读取style元素定义样式表的兼容问题”吧...

99+

2024-04-02
JavaScript如何通过querySelectorAll()方法查找html元素

这篇文章主要介绍了JavaScript如何通过querySelectorAll()方法查找html元素的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何通过...

99+

2024-04-02
vue3中如何通过ref获取元素节点

本文小编为大家详细介绍“vue3中如何通过ref获取元素节点”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue3中如何通过ref获取元素节点”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。通过ref获取元素节点...

99+

2023-07-06
JavaScript中怎么获取一个元素的样式信息

JavaScript中怎么获取一个元素的样式信息，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。一. 跨浏览器方法currentStyle对象是...

99+

2024-04-02
如何通过网页抓取访问动态 HTML 元素？

php小编小新在这里为大家介绍一种方法，可以通过网页抓取访问动态HTML元素。当我们在进行网页抓取时，有时会遇到一些动态生成的内容，这些内容在网页加载完成之前无法直接获取。幸运的是，我...

99+

2024-02-09

html元素
javascript如何获取隐藏元素的高度

这篇文章将为大家详细讲解有关javascript如何获取隐藏元素的高度，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。获取方法：1、引入jqu...

99+

2024-04-02
css如何获取某个id值元素并更改样式

这篇文章主要介绍“css如何获取某个id值元素并更改样式”，在日常操作中，相信很多人在css如何获取某个id值元素并更改样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”cs...

99+

2024-04-02
JavaScript如何返回数组中通过测试的第一个元素的值

这篇文章给大家分享的是有关JavaScript如何返回数组中通过测试的第一个元素的值的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。返回数组中通过测试（函数fn内判断）的第一个元素的值Array.prototype...

99+

2023-06-03
如何用JavaScript获取页面元素的位置

本篇内容主要讲解“如何用JavaScript获取页面元素的位置”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用JavaScript获取页面元素的位置”吧!1...

99+

2024-04-02
你知道如何通过npm获取最好的go api教程吗？

随着互联网技术的不断发展，各种语言和框架层出不穷。而在这些语言中，go语言在近些年来的发展趋势中显得尤为突出。在go语言中，许多api为我们的开发工作提供了便利，但是对于新手来说，可能还不太熟悉如何获取和使用这些api。在本文中，我们将介...

99+

2023-08-04

api 教程 npm
如何使用JQuery来移除元素的样式

JQuery是一个非常流行的JavaScript库，开发者们经常使用JQuery来操作HTML页面中的元素。在JQuery中，我们可以使用一些简单的方法来操作元素的样式，如添加样式、删除样式或编辑样式。本文将重点介绍如何使用JQuery来移...

99+

2023-05-14
如何使用jQuery来修改和读取元素的HTML

Inner HTML 是一个用来访问和修改一个元素的HTML内容的属性。在过去的几年中，jQuery已经成为JS实现内部模板的最流行的工具之一。在本文中，我们将介绍如何使用jQuery来修改和读取元素的HTML。jQuery内部模板（Inn...

99+

2023-05-14
javascript如何获取指定class属性名的元素

javascript中获取指定class属性名元素的方法：可以使用“getElementsByClassName”方法获取指定class属性名的元素；语法格式为：“document.getElementsByClassName('d...

99+

2024-04-02
教你javascript如何获取指针的位置

javascript获取指针的位置的方法：使用事件对象的pageX和pageY，或者clientX和clientY属性，并且配合scrollLeft和scrollTop属性，这样就可...

99+

2024-04-02
如何读取和格式化通过 bash 管道接收的文本流？

在我们的日常工作中，经常需要通过命令行工具来处理文本数据。而在Linux系统中，bash管道（pipe）是一个非常强大的工具，可以将一个命令的输出作为另一个命令的输入。但是，当我们通过...

99+

2024-02-11

overflow 标准库
教你利用python如何读取txt中的数据

目录前言方法一：运用open（）函数方法二：使用numpy包的loadtxt方法方法三：使用pandas的read_table方法进行读取总结前言当我们在用python时可能会遇到...

99+

2024-04-02