js怎样获取非行间样式，设置行间样式？

最新推荐文章于 2023-02-19 20:51:04 发布

Summer_water

最新推荐文章于 2023-02-19 20:51:04 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js获取行间样式

本文链接：https://blog.csdn.net/Summer_water/article/details/72911662

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用JavaScript获取HTML元素的CSS样式，包括行内样式和非行内样式。通过使用currentStyle（IE浏览器）和getComputedStyle（火狐等浏览器）方法实现跨浏览器的样式获取。此外，还提供了一个简单的示例代码，演示了如何实际应用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript的style属性可以获取html上标签的样式，但是不可以获取css里的样式我们怎么才能获取css里的样式？这时候就要用到JavaScript提供的currentStyle（ie）和getComputedStyle(火狐)来获取了！

<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>获取行间样式</title>
    <style>
        #box{width: 200px;height: 200px;background: red;}
    </style>
</head>
<body>
<div id="box"></div>
<script>
    window.onload=function(){
        var oBox=document.getElementById('box');
        //获取行间样式
        function getStyle(obj,attr) {
            if(obj.currentStyle){      //针对ie获取非行间样式
               return  obj.currentStyle[attr];
            }else{
               return getComputedStyle(obj,false)[attr];//针对谷歌，火狐获取非行间样式
            }
        }
        //获取行间样式或者设置行间样式
        function css(obj,name,value){
            if(arguments.length==2){      //arguments参数数组，当参数为2时表示获取行间样式
                return getStyle(obj,name);
            }else{
               if(arguments.length==3){   //arguments参数数组，当参数为3时表示设置样式
                  return obj.style[name]=value;
               }
            }
        }
         alert(getStyle(oBox,'width'));
         css(oBox,'background',"blue");
         alert(css(oBox,'background'));
    }
</script>
</body>
</html>