获取元素样式的三种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_41861751/article/details/83832382

在学习DOM的时候就看到通过三种方法来获取元素样式值。

一、元素.style

只能获取行内样式，就是标签里面写的style样式。无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="btn();">点击</button>
		<div id="box1" style="background:red ;width: 200px; height: 200px;"> </div>
		<script>
			    function btn(){
				    var box1 = document.getElementById("box1");
					alert(box1.style.backgroundColor);
				};
		</script>
	</body>
</html>

二、 currentStyle

这个属性只有IE支持

语法：元素.currenStyle.样式名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取元素样式</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;		
			}
		</style>
		
	</head>
	<body>
		<button	onclick="btn()">点我一下</button>
		<br /><br />
		<div id="box1"></div>
		<script>
		   	var box1= document.getElementById("box1");
		   	function btn(){
				 alert(box1.currentStyle.width);
            };   	    	   	   
		</script>
	</body>
</html>

三、getComputedStyle
  getComputedStyle() 获取当前元素当前样式，这个方法是Window的方法，可以直接用，   需要2个参数
    第一个：要获取样式元素
                  第二个：可以传输一个伪元素。一般都传Null
该方法返回一个对象，对象中封装了当前元素的对应的样式
可以通过对象.样式名读取样式
如果获取样式没有设置，则会获取到真实的值而不是默认值
比如没有设置width,获取的是具体的宽度，而不是auto
但是IE8及以下的浏览器不适合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取元素样式</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				
			}
		</style>
	</head>
	<body>
		<button	onclick="btn()">点我一下</button>
		<br /><br />
		<div id="box1"></div>
		
		<script>
		   		var box1= document.getElementById("box1");
		   		function btn() {
				   	    var obj=getComputedStyle(box1,null);
				   	    alert(obj.width);	      
		   		};
		</script>
		
	</body>
</html>

是不是感觉特别的苦恼，万一用户想知道我這个是什么样式的，但是我又不知道用户用的什么浏览器，currentStyle适合IE浏览器,getComputedStyle()这个适合正常的浏览器（除了IE8及其以下的）2个又不能同时共用，你想到了什么办法了吗？解决这个兼容性的问题

对的，没错，我们可以设置一个方法来封装它

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取元素样式</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				
			}
		</style>
	</head>
	<body>
		<button	onclick="btn()">点我一下</button>
		<br /><br />
		<div id="box1"></div>
		<script>
               	var box1= document.getElementById("box1");
		   		function btn(){
				   	alert(getStyle(box1,"width"));	  
		   		};
			   
			  /*定义一个函数，用来获取指定元素的当前样式
			   * 
			   *   参数：obj  要获取的元素
			   *   参数：name  要获取的样式名
			   * 
			   * */
			  function getStyle(obj,name){
			  	  //正常的浏览器方式
			  	  //return getComputedStyle(name,null)[name];
			  	  
			  	  //ie8的方式
			  	  //return obj.currenStyle[name];
			  	  if(window.getComputedStyle){
			  	  	return getComputedStyle(obj,null)[name];
			  	  }else{
			  	  	return obj.currenStyle[name];
			  	  }
			  }
		</script>	
	</body>
</html>

js基础获取元素样式