在刚学前端时时常是将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
//这样只需写一次就够了