js基础获取元素样式

墨蓝 2022-04-18 03:27 274阅读 0赞

在学习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.样式名

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

是不是感觉特别的苦恼，万一用户想知道我這个是什么样式的，但是我又不知道用户用的什么浏览器，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>