您的位置：首页 > Web前端 > CSS

js基础获取元素样式

2018-11-07 22:43 120 查看

在学习DOM的时候就看到通过三种方法来获取元素样式值。

一、元素.style

只能获取行内样式，就是标签里面写的style样式。无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="btn();">点击</button>
<div id="box1" style="background:red ;width: 200px; height: 200px;"> </div>
<script>
function btn(){
var box1 = document.getElementById("box1");
alert(box1.style.backgroundColor);
};
</script>
</body>
</html>

二、 currentStyle

这个属性只有IE支持

语法：元素.currenStyle.样式名

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素样式</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>

</head>
<body>
<button	onclick="btn()">点我一下</button>
<br /><br />
<div id="box1"></div>
<script>
var box1= document.getElementById("box1");
function btn(){
alert(box1.currentStyle.width);
};
</script>
</body>
</html>

三、getComputedStyle
  getComputedStyle() 获取当前元素当前样式，这个方法是Window的方法，可以直接用，   需要2个参数
    第一个：要获取样式元素
                  第二个：可以传输一个伪元素。一般都传Null
该方法返回一个对象，对象中封装了当前元素的对应的样式
可以通过对象.样式名读取样式
如果获取样式没有设置，则会获取到真实的值而不是默认值
比如没有设置width,获取的是具体的宽度，而不是auto
但是IE8及以下的浏览器不适合

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素样式</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;

}
</style>
</head>
<body>
<button	onclick="btn()">点我一下</button>
<br /><br />
<div id="box1"></div>

<script>
var box1= document.getElementById("box1");
function btn() {
var obj=getComputedStyle(box1,null);
alert(obj.width);
};
</script>

</body>
</html>

是不是感觉特别的苦恼，万一用户想知道我這个是什么样式的，但是我又不知道用户用的什么浏览器，currentStyle适合IE浏览器,getComputedStyle()这个适合正常的浏览器（除了IE8及其以下的）2个又不能同时共用，你想到了什么办法了吗？解决这个兼容性的问题

对的，没错，我们可以设置一个方法来封装它

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素样式</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;

}
</style>
</head>
<body>
<button	onclick="btn()">点我一下</button>
<br /><br />
<div id="box1"></div>
<script>
var box1= document.getElementById("box1");
function btn(){
alert(getStyle(box1,"width"));
};

/*定义一个函数，用来获取指定元素的当前样式
*
*   参数：obj  要获取的元素
*   参数：name  要获取的样式名
*
* */
function getStyle(obj,name){
//正常的浏览器方式
//return getComputedStyle(name,null)[name];

//ie8的方式
//return obj.currenStyle[name];
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currenStyle[name];
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航