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

2024-08-05 15:36:55

一、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);
				};

			};

			/*
			 * 参数：
			 * 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、浏览器展示

总结

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

原生js获取元素样式的简单方法

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty
javascript获取元素CSS样式代码示例

使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签
js正确获取元素样式详解

在说js获取元素样式之前,简单地谈一下样式样式分三种外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM
javaScript 读取和设置文档元素的样式属性

首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返
JS如何设置元素样式的方法示例

一看到这个标题,大家可能首先想到的就是使用"[元素].style.[CSS属性名] = [属性值]"这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择. 接下来,我将详细介绍三种设置元素样式的方式. 一.style 这个其实就是我们所熟知的方式,举个例子~~ <div id="box"></div> var box = document.getElementById("box"); box.style.wid
教你如何通过JavaScript读取元素的样式

目录一.getComputedStyle() 1.getComputedStyle()是window的方法,可以获取元素当前的样式 2.两个参数 3.代码实例 4.浏览器效果二.定义一个方法获取元素信息 1.代码实例 2.浏览器显示三.clientWidth和clientHeight 1.这两个元素是获取元素的宽度和高度,不带px 2.这两个元素是只读的,不可修改 3.代码实例 4.浏览器展示四.offsetWidth和offsetHeight 1.获取元素的整个的宽度和高度,包括内容区
JavaScript 读取元素的CSS信息的代码

比如为某个HTML元素级联了一组样式信息,其中width属性的值为80px.然后调用脚本读取这个值,得到的结果总是一个空字符串,而事实上我想得到"80px".针对这种情况,David Flanagan在<JavaScript 权威指南>(第五版)一书中给出了解决方案. 以下是针对JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4的翻译脚本计算的样式 HTML元素的style属性相当于style
教你如何使用 JavaScript 读取文件

目录使用 JavaScript 读取文件概述选择带有输入元素的文件处理输入元素的变化事件从输入元素的 files 属性中获取一个 File 对象使用 FileReader 读取 File 对象读取文件示例读取和显示所选文件的示例 Promise 的事件处理和使用简单的二进制文件查看器您可以使用 JavaScript File API 加载选定文件的内容.本节介绍 File API 的基本用法. 现在让我们看看如何使用 File API. 使用 JavaScript 读取文件概述
JavaScript 读取图片实例代码

Untitled Page JavaScript读取图片测试例子 '); var a = 0; var b = 1; Loading(a,b); } //显示加载失败信息 function Gif_Err() { alert("载入失败!") } //显示加载成功信息 function Gif_End() { alert("载入完成!") } //加载图片,并显示 function Loading(a,b) { //当数组元素为空时,切换数组的一维 if (!Gif
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码代码如下: var getStyle = function( elem, type ){ return 'getComputed
JavaScript DOM元素常见操作详解【添加、删除、修改等】

本文实例讲述了JavaScript DOM元素常见操作.分享给大家供大家参考,具体如下: DOM概念 DOM(Document Object Model):文档对象模型. 通过开发者工具的Elements标签页可以查看通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点整个文档是由一系列节点对象组成的一棵树. 节点(Node)包括元素节点(1).属性节点(2).文本节点(3)(1..2..3..代表节点类型)_ var th1= document.getElementByI
javascript操作元素的常见方法小结

本文实例讲述了javascript操作元素的常见方法.分享给大家供大家参考,具体如下: 获取元素方法一可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div i
javascript通过元素id和name直接取得元素的方法

本文实例讲述了javascript通过元素id和name直接取得元素的方法.分享给大家供大家参考.具体分析如下: 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单介绍下. 在html中,一般最直接的辨别html元素使用的是name和id属性,两者有着细微的不同:id必须页面唯一,但name可以有重复. 在js中如果id名称不和内置属性或全局变量重名的话,该名称自动成为window对
浅谈javascript获取元素transform参数

之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值. 复制代码代码如下: body{-webkit-transform: translateX(20px);} 但当我尝试这样做的时候,奇迹出现了: 当时我的内心几乎是崩溃的,我只想安安静静的获取translate的值而已啊,谁知给我弹出这货,虽然上高数课的时候也有讲到所有变化(二维.三维)效果都可以浓

教你如何通过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、浏览器展示

总结

相关推荐

随机推荐

九、事件的冒泡

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