JavaScript中getstyle方法来读取元素的样式

最新推荐文章于 2021-09-14 09:57:32 发布

plannothing

最新推荐文章于 2021-09-14 09:57:32 发布

阅读量1k

点赞数 1

分类专栏： js基础教程文章标签： js javascript css

本文链接：https://blog.csdn.net/plannothing/article/details/108014015

版权

js基础教程专栏收录该内容

101 篇文章 0 订阅

订阅专栏

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

// alert(box1.style.width);

				/*
				 * 获取元素的当前显示的样式
				 * 	语法：元素.currentStyle.样式名
				 * 它可以用来读取当前元素正在显示的样式
				 *  如果当前元素没有设置该样式，则获取它的默认值
				 * 
				 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
				 */

// alert(box1.currentStyle.width);
// alert(box1.currentStyle.backgroundColor);

				/*
				 * 在其他的浏览器中可以使用
				 * 			getComputedStyle()这个方法来获取元素当前的样式
				 * 			这个方法是window的方法，可以直接使用
				 * 需要两个参数
				 * 			第一个：要获取样式的元素
				 * 			第二个：可以传递一个伪元素，一般是null
				 * 
				 * 该方法会返回一个对象，对象封装了当前元素对应的样式
				 *  可以通过对象.样式名来读取样式
				 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
				 * 	比如，没有设置width，它不会获取到auto，而是一个长度
				 * 
				 * 但是该方法不支持IE8及以下的浏览器
				 * 
				 * 通过currentStyle和getComputedStyle是只读的不能改
				 */

// var obj = getComputedStyle(box1,null);
// alert(obj.width);
// alert(obj.backgroundColor);

				var w = getStyle(box1,"width");
				alert(w);

			
			};
			
		}
		/*
		 * 定义一个函数，用来获取指定元素的当前样式
		 * 参数：
		 * 		obj 要获取样式的元素
		 * 		name 要获取的样式名
		 * 
		 */
		
		function getStyle(obj,name){

// alert(getComputedStyle);

// if(window.getComputedStyle){
// //正常的浏览器方式，具有getComputedStyle（）方法
// return getComputedStyle(obj,null)[name];
// }else{
// //IE8以下
// return obj.currentStyle[name];
// }
//用三目运算符
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];

// if(obj.currentStyle){
// //IE8以下
// return obj.currentStyle[name];
//
// }else{
// //正常的浏览器方式，具有getComputedStyle（）方法
// return getComputedStyle(obj,null)[name];
// }
//

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

plannothing

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中getstyle方法来读取元素的样式

<html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width:; height:100px; background-color:yellow; } </style> <script type="text/javascript"> window.o
复制链接

扫一扫