js无法获取样式的解决方法

在刚学前端时时常是将html、css、js都写在同一个HTML文件里，但学到后面，一般都会进行分开

如果将html，css，js都分成单独的文件，再将js，css引入html中，样式和js代码都能够执行，在做页面的时候，我们常常会去使用div.style.left / top /....去修改样式。在修改样式之前，我们得先获取到该元素的样式。

例如：获取及修改其left

<div style="position:absolute;left:0;">你好！</div>

var div = document.getElementById;

console.log(div.style.left)// 0px 

div.style.left = 5 + 'px';

可以正常获取和修改。 

 

 

但有时我们需要通过js获取该元素的样式，会发现有一个问题，js能够通过div.style.left获取到标签的行内样式left，但是非行内样式获取到的只有空白。css样式(行内样式、内部样式、外部样式)

 

内部样式：

<style>
.div{

        position:absolute;
        left:0;

</style>


<div class="div">你好!</div>

 

外部样式 ：

<link rel="stylesheet" type="text/css" href="./css/index.css">




<div class="div">你好！</div>

 

在我不断的寻找，终于找到了解决的办法，所以来记录一下。

 

 

解决方法：

 

有个全局方法是getComputedStyle，它可以获取到当前对象样式规则信息。

使用方法：

window.getComputedStyle(obj,pseudoElt).attr

//obj为元素对象;
//pseudoElt为:after,:before之类的，当都没有时就null
//attr为属性，例如：background、left;

 

但存在兼容问题，IE浏览器并不支持该方法，但它支持CurrentStyle

使用方法：

obj.currentStyle.arr

//obj为对象
//arr为属性

 

为了兼容多数浏览器，最好是对使用的浏览器进行判断。

代码如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).left : obj.currentStyle.left;


//或者


 function getElementStyle(obj,attr){
                    	if(obj.currentStyle){
                    		return obj.currentStyle[attr]
                    	}else{
                    		return getComputedStyle(obj,false)[attr]
                    	}
                    }

console.log(getElementStyle(div,left))//0px

//这样只需写一次就够了