js中获取元素属性、currentStyle与getComputedStyle的区别

最新推荐文章于 2021-12-14 10:32:58 发布

Strive_18

最新推荐文章于 2021-12-14 10:32:58 发布

阅读量454

点赞数

本文链接：https://blog.csdn.net/TC_16_zl/article/details/73955067

版权

js中获取元素属性

一、层叠样式表的是三种形式：

1.内联样式：在HTML标签用style属性设置

例如：<p style = "color : #456">内联样式</p>

2.嵌入样式：通过<head>标签内通过<style>标签设置

p {color:#456}

</style>

3. 外部样式：通过<link>标签设置

p{{color:#456};

区别：

使用style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

currentStyle是兼容IE浏览器的兼容IE 6、7、8

getComputedStyle与currentStyle作用相同，但是适用于opera、firefox，safari、 chrome。

二、getComputedStyle与currentStyle的注意事项

1.getComputedStyle与currentStyle都是获取计算机获得的是计算机(浏览器)计算后

得到的结果。可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获

取行间样式。不能获取复合样式如background属性值，只能获取单一样式，而

且单一的样式不能进行做判断。

2.获取的元素的属性不能有空格。

3.不能获取未设置的属性：不兼容

4.getComputedStyle(obj,任意值)

在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家

通用的写法，目的是为了兼容老版本的火狐浏览器。

三、getComputedStyle与style的区别

1. getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能

读能写。

2.getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没

有CSS代码，也会把默认的都显示出来）；而element.style只能获取元素style属

性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回

对象中length属性值（如果有），而element.style就是0。

四、getComputedStyle与currentStyle的兼容方法

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>js的练习</title>
<style>
div{ height:120px; width:100px; background:pink; }
</style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
alert(getStyle(oDiv,'height'));
function getStyle(obj,attr){
/*
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr]; //用 if...else语句实现
}*/
return obj.currentStyle?obj.currentStyle:getComputedStyle(obj)[attr];

//用三元运算实现与if...else实现的效果相同，但更为简单
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1" />
<div id="div1"></div>
</body>
</html>

Strive_18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中获取元素属性、currentStyle与getComputedStyle的区别

js中获取元素属性一、层叠样式表的是三种形式： 1.内联样式：在HTML标签用style属性设置例如：内联样式 2.嵌入样式：通过标签内通过标签设置 p {color:#456} 3. 外部样式：通过标签设置
复制链接

扫一扫