获取元素的style样式（内联，内部）

最新推荐文章于 2024-07-02 11:08:14 发布

leafqi

最新推荐文章于 2024-07-02 11:08:14 发布

阅读量9.1k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 获取style样式

本文链接：https://blog.csdn.net/xi_2130/article/details/48750383

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

我们在实际应用中，经常会获取元素的样式，
我们会这样获取：

获取内嵌样式

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>获取非行间元素样式</title> 
    <style type="text/css"></style> 
</head> 
<body>
    <div id='test' style="width:100px; height:100px; background-color:red;" >style</div> 

    <script type="text/javascript">

        var test = document.getElementById('test');
        var a = test.style.width;
        alert(a);

    </script>
</body> 
</html>

执行结果

这里写图片描述

我们看结果，好的，没问题，获取出来了，但是实际应用中，我们是这样用的吗？不是，我们是这样用的

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>获取非行间元素样式</title> 
    <style type="text/css">
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style> 
</head> 
<body>
    <div id='test'>style</div> 

    <script type="text/javascript">

        var test = document.getElementById('test');
        var a = test.style.width;
        alert(a);

    </script>
</body> 
</html>

看起来没问题是吧，好的，我们测一下结果

这里写图片描述

结果很惊讶，这是为什么？

获取非行间样式（内部样式）

其实解决方式是这样的，

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>获取非行间元素样式</title> 
    <style type="text/css">
        #test{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style> 
</head> 
<body>
    <div id='test'>style</div> 

    <script type="text/javascript">
        /*
         *获取元素的非行间样式
         *
         * oDiv -> dom元素对象
         * attr -> style属性
         *
         *返回值 -> style属性的值
         **/
        function getStyle(oDiv, attr){
            if(oDiv.currentStyle){
                //针对IE浏览器
                return oDiv.currentStyle[attr];
            }else{
                //Firefox浏览器
                return getComputedStyle(oDiv, false)[attr];
            }
        }

        var test = document.getElementById('test');
        var a = getStyle(test, 'width');
        alert(a);

    </script>
</body> 
</html>

然后顺利的得到了这样的结果

这里写图片描述

leafqi

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
获取元素的style样式（内联，内部）

我们在实际应用中，经常会获取元素的样式，我们会这样获取：获取内嵌样式<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取非行间元素样式</title> <style type="text/css">
复制链接

扫一扫

专栏目录