学习JS读取元素样式时遇到的一个小问题,谷歌浏览器不支持obj.currentStyle获取HTMLElement计算后的样式。然后整理JS操作样式和内联样式如下:
1.obj.style获取的是内联样式,即style属性中的值
以下面一个JS操作内联样式的例子作为讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
#box1{
width:200px;
height:200px;
background-color: brown;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//通过JS修改元素的样式
//语法:元素.style.样式名=样式值
//注意:如果css的样式中含有-,这种名称在JS中是不合法的,比如background-color,需要将这种样式名称修改为驼峰命名法
//通过style属性设置的样式都是内联样式
//内联样式有较高的优先级,所以通过JS修改样式往往会立马显示
//尽量不要为样式加上!important,因为通过JS也不能覆盖该样式,此时会导致JS修改的样式不成功
box1.style.width="500px";
box1.style.height="400px";
// box1.style.background-color="yellow";
box1.style.backgroundColor="yellow";
};
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//读取的是内联样式,样式表里面的读取不了
alert(box1.style.width);
alert(box1.style.backgroundColor);
}
}
</script>
</head>
<body>
<button id="btn01">点击一下修改样式</button>
<button id="btn02">读取样式</button>
<div id="box1"></div>
</body>
</html>
2.(1)obj.currentStyle
只有IE和Opera支持currentStyle获取HTMLElement的计算后的样式,其他浏览器中使用getComputedStyle
获取元素的当前显示样式
语法:元素.currentStyle.样式名
(2)window.getComputedStyle函数
第一个参数为获取计算后的样式的目标元素
第二个参数为期望的伪元素,如':after',':first-letter'等
注意:在Firefox中,第二个参数是必须的,如果没有期望的伪元素,就设置为null,而其他浏览器中可以省略第二个参数
下面以在谷歌浏览器上运行为例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
#box1{
width:200px;
height:200px;
background-color: brown;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//读取box1的宽度
//获取元素的当前显示样式
alert(window.getComputedStyle(box1).width);
};
};
</script>
</head>
<body>
<button id="btn01">读取样式</button>
<br/><br/>
<div id="box1"></div>
</body>
</html>
3.自定义getStyle方法
定义一个函数,用来获取指定元素的当前样式
// 参数:obj:要获取样式的元素
// name:要获取的样式名
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}