JS来获取全局样式值—style，currentStyle，getComputedStyle() 并解决浏览器兼容性问题
程序员文章站
2022-07-04 15:02:17
...
一. style对象
style读取样式
语法：元素.style.样式名
还可以设置通过style属性设置的样式
语法：元素.style.样式=样式值
注意： 如果Css的样式值含有-，
这种名称在JS中是不合法的，比如background-color
我们在使用是要把这样的名称修改为驼峰命名法
去掉-，然后将-号后的字母大写
注意：通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。
通过一个例子来解释：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>style</title>
<style>
#box1{
width:200px;
height: 200px;
background-color: red;
}
</style>
<script>
window.onload=function(){
/*
点击按钮以后，修box1的大小
*/
//获取box1
var box1=document.getElementById("box1");
//绑定单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//修改box1的宽度
/*
我们通过style属性设置的样式都是内联样式
而内联样式有较高的优先级，所以通过js修改的样式往往会立即显示
但是如果在样式中写了！important 则此时样式会有最高的优先级
即使通过js也不能覆盖该样式，导致js样式修改失效
*/
box1.style.width="300px";
box1.style.height="300px";
box1.style.backgroundColor= "yellow";
}
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
alert(box1.style.width);
}
}
</script>
</head>
<body>
<button id="btn01">点我一下1</button>
<button id="btn02">点我一下2</button>
<div id="box1"></div>
</body>
</html>
二. currentStyle对象
currentStyle是获取元素当前显示的样式
语法：元素.currentStyle.样式名
注意：只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式
未设置的属性值，currentStyle 会读取浏览器默认值
alert(box1.currentStyle.width);
alert(box1.currentStyle.backgroundColor);
三. getComputedStyle()方法
getComputedStyle() 这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
该方法会返回一个数组对象，对象中封装了当前元素对应的样式
可以通过对象，样式名来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如：没有设置width,它不会获取到auto 而是一个长度
但是该方法不支持IE9以下的浏览器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>读取元素的样式</title>
<style>
#box1{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
alert(getComputedStyle(box1,null).backgroundColor); //rgb(255, 255, 0)
//alert(getComputedStyle(box1, null)['backgroundColor']); 该写法与上面作用一样
alert(getComputedStyle(box1,null).width); //100px
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box1"></div>
</body>
</html>
小结：以上的三种方法都存在缺陷，style它只能获取到内联样式中的属性值，currentStyle它由于兼容性不好，使用起来有很大的问题。getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器。
四，解决兼容性问题
自己定义一个函数，通过判断来确定使用哪种方法，可以解决浏览器的兼容性问题。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>读取元素的样式</title>
<style>
#box1{
width:100px;
height: 100px;
background-color: yellow;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
var a=getStyle(box1,"width");
alert(a);
}
}
/*
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle（）方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式，没有getComputedStyle（）方法
return obj.currentstyle[name];
}
//与上面的if作用一样
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box1"></div>
</body>
</html>