前端开发使用js获取CSS属性的方法

前端开发seo怎么优化
怎么看待web前端开发
前端开发怎么在手机上测试工具

在某些情况下,我们会需要利用js获取元素的css属性。
css有三种形式
内联样式 <p style=”color:red;” id=”text”>需要获取属性</p>
内部样式 <style type=”text/css”>

text{

color: blue;
}
</style>

外部样式 <link rel=”stylesheet” type=”text/css” href=”index.css”>
通常情况下,我们可以通过Element.style.xxxx方法来获取css属性
html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”UTF-8″ />
        <title>index</title>
    </head>
    <body>
        <p style=”color:red;” id=”text”>这是一段文字</p>
    </body>
    <script type=”text/javascript”>
        ;(function() {
            var text = document.getElementById(‘text’)
            var textcolor = text.style.color
            alert(textcolor)
        })()
    </script>
</html>

可以看到,上述方法可成功获得css属性值,但是,这个方法只能获得内联的css属性
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>index</title>
        <style type=”text/css”>
            #text {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p id=”text”>这是一段文字</p>
    </body>
    <script type=”text/javascript”>
        ;(function() {
            var text = document.getElementById(‘text’)
            var textcolor = text.style.color
            alert(textcolor)
        })()
    </script>
</html>

可以看到,只要我们把css样式改为内部样式或者外部样式,就不能获取到css属性了。但在大多数时候,我们的样式表都是使用外部或内部样式。
在这种情况下,我们就可以使用window.getComputedStyle(“元素”, “伪类”);来获取css样式,伪类如果没有定义的话,可设置为null
html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>index</title>
        <style type=”text/css”>
            #text {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p id=”text”>这是一段文字</p>
    </body>
    <script type=”text/javascript”>
        ;(function() {
            var text = document.getElementById(‘text’)
            var textcolor = window.getComputedStyle(text, null).color
            alert(textcolor)
        })()
    </script>
</html>

这样就能成功获取外部或内部的css属性值了。经过作者验证,这个方法目前在IE11浏览器中也是可用的,可能新版本IE已经支持了。
对于不支持的IE浏览器,我们可使用element.currentStyle.xxx;方法
如以上例子,可写为var textcolor=text.currentStyle.color;
注:currentStyle和getComputedStyle都是只读形式,也就是,只能获取css属性值,而不能通过它们设置css属性值。

» 本文来自:前端开发者 » 《前端开发使用js获取CSS属性的方法》
» 本文链接地址:https://www.rokub.com/8132.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!