前言:用js的style属性可以获取html标签的行间样式(oDiv.style.width),但是不能获取非行间样式;如果需要取非行间样式(不能用来设置),可以使用obj.currentStyle[attr](IE)和getComputedStyle(obj,false)[attr](FF)来解决(然而,为了让其兼容,解决方法,封装成getStyle事件)。
一、区别
(1)style专指行间样式,即标签带style属性,例如:
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
//alert("行间样式测试:" +oDiv.style.backgroundColor);
}
</script>
<div id="div1" style="width:200px;height:100px;background:red;">
这是行间样式的测试
</div>
(2)currentStyle指全局样式表、内嵌样式和HTML标签属性中指定的对象格式和样式的所有样式,currentStyle仅支持IE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>返回值</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
alert(currentStyle.width);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
(3)getComputedStyle,有两个参数,第二个参数可以为任何数,不起实质性作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>返回值</title>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
alert(getComputedStyle(oDiv,false).width);
}
</script>
</body>
</html>
currentStyle谷歌和火狐游览器可能不兼容。解决办法是:使用getComputedStyle()。Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是readonly的。IE中则用currentStyle代替。
语法:arr_style=window.getComputedStyle(elem_id,ov)
其中,ov:伪元素,是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。返回值类型和style一样。
二、兼容所有游览器的写法
运用场景:知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式?currentStyle(只兼容IE),getComputedStyle(兼容FF)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>兼容所有游览器的写法</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById('div1');
if(oDiv.currentStyle){
//IE
alert(oDiv.currentStyle.width);
}
else{
//FF
alert(getComputedStyle(oDiv,false).width);
}
};
//通过封装一个函数来写,将来用的时候再调用
function getStyle(obj,name){
if(obj.currentStyle) {
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
};
window.onload=function(){
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'));
}
</script>
</body>
</html>
分步拆解,解决兼容,封装成getStyle事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>深入javascript</title>
<style type="text/css">
#div2 {
width: 500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
//最初
if(oDiv2.currentStyle){
//IE
console.log(oDiv2.currentStyle.height);
}else{
//FF
console.log(getComputedStyle(oDiv2,false).width);
}
//封装一个兼容性的获取元素样式的函数
//分析:哪个元素,哪个样式
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyle[attr];
}else{
//FF
return getComputedStyle(obj,false)[attr];
}
}
//用法
window.onload=function(){
var oDiv=document.getElementById("div2");
console.log(getStyle(oDiv,"width"));
}
//进一步封装
//obj:获取谁的样式,attr:样式名称,value样式的值
function css(obj,attr,value){
if(arguments.length==2){//获取
return getStyle(obj,attr)
}else if(arguments.length==3){//设置
obj.style[attr]=value;
}
}
//用法
//oBtn.onclick=function(){
// css(oDiv,"background","black");
// css(oDiv,"border","3px solid yellow");
// console.log(css(oDiv,"width"));
}
</script>
</body>
</html>
参考博客:知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式? https://www.cnblogs.com/zhangjingyun/p/4561648.html
js-style,currentStyle与getComputedStyle() https://blog.csdn.net/duchao123duchao/article/details/51306369
元素未显示设置width/height时IE中无法使用currentStyle获取 https://www.cnblogs.com/snandy/archive/2011/09/05/2167056.html
currentStyle https://www.cnblogs.com/wang715100018066/p/6000536.html