读取元素的样式

最新推荐文章于 2024-07-26 20:46:33 发布

努力努力再努力dyx

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量129

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45844109/article/details/119489286

版权

JavaScript 样式浏览器兼容性 currentStyle getComputedStyle

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

读取元素当前显示的样式
下面提到了两个方法
一个是：
元素.currentStyle.样式名（它可以读取当前元素正在显示的样式）
这个方式仅支持IE浏览器，其他浏览器不行
另一个是：
getComputedStyle(元素名).样式名;
其他浏览器可以用这个
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>读取元素的样式</title>
		<style type="text/css">
			#box1{
				background-color: black;
				width: 200px;
				height: 200px;				
			}
		</style>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br />
		<br />
		<div id="box1">
			
		</div>
		<script type="text/javascript">
			//点击按钮读取box1的样式
			var btn01=document.getElementById("btn01");
			var box1=document.getElementById("box1");
			//为按钮绑定点击事件
			btn01.onclick=function(){
				//获取元素当前显示的样式
				//语法：元素.currentStyle.样式名（它可以读取当前元素正在显示的样式）
				//只有IE支持这个currentStyle
				//alert(box1.currentStyle.width);
				//非IE浏览器使用getComputedStyle(元素名).样式名；
				//alert(getComputedStyle(box1).width);
				//box1是元素名，width是样式名
				alert(getStyle(box1,"width"));
			};
			/*
			 *定义一个函数，用来获取指定的元素的当前样式
			 * 参数：obj 这里指的是，要获取样式的元素 
			 *     name 指的是 要获取的样式名
			 * */
			  function getStyle(obj,name){
		  	//不能直接".name"，这样是直接获取到名字为name的样式，就写死了，所以要采用[name],这样的形式
            return getComputedStyle(obj,null)[name];			  
			  }
		</script>
	</body>
</html>

代码在注释里面写好了，可以直接调试不同的方法。
运行结果如下
在这里插入图片描述

努力努力再努力dyx

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
读取元素的样式

读取元素当前显示的样式下面提到了两个方法一个是：元素.currentStyle.样式名（它可以读取当前元素正在显示的样式）这个方式仅支持IE浏览器，其他浏览器不行另一个是：getComputedStyle(元素名).样式名;其他浏览器可以用这个代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>读取元素的样式</title> &
复制链接

扫一扫

专栏目录