js获取css属性值的方法

最新推荐文章于 2023-11-17 10:59:24 发布

哆啦咪唏

最新推荐文章于 2023-11-17 10:59:24 发布

阅读量2.2k

点赞数 1

分类专栏： js 文章标签： css js html

本文链接：https://blog.csdn.net/weixin_42123213/article/details/113810725

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js操作获取dom元素的样式属性值

obj.style: 它只能够获取通过style设置的元素CSS属性值：

在html标签内通过style设置行内属性
通过.dom.style.width="100px"这样类似设置。

无法获取定义在<style type="text/css">里面的属性,这时getComputedStyle()就可以发挥作用了，它可以获取到指定元素对应css属性的最终计算值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style type=”text/css”>
	.ss{color:#cdcdcd;}
</style>
</head>
<body>
<div id='css88' class='ss' style='width:200px; height:200px; background:#333333'>JS获取CSS属性值</div>

<script type=”text/javascript”>
alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color);//null
</script>
</body>
</html>

window.getComputedStyle(dom元素，【伪类】)，不兼容IE浏览器(obj.currentStyle)。

window.getComputedStyle(el)等价于 document.defaultView.getComputedStyle(el)

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的DOM元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个实时的CSSStyleDeclaration对象，包含当前元素的所有计算的样式。当元素的样式更改时，它会自动更新本身。

<!DOCTYPE html>
<html lang="en">
<head>
<title>计算元素样式</title>
<style>
#myDiv {
    width:100px;
    height:200px;
}
</style>
<body>
<div id ="myDiv" style=" border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”
</script>
</body>
</head>
</html></span>

下面这个函数，能够获取一个元素的任意 CSS 属性值。

    function  getStyle(element,attr){
            if(element.currentStyle){
                return element.currentStyle[attr]
            }else{
                return getComputedStyle(element).attr
           } 
      }

哆啦咪唏

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
js获取css属性值的方法

js操作获取dom元素的样式属性值obj.style: 只能获取行内属性，而无法获取定义在<style type="text/css">里面的属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫