如何获取元素最终使用的css值

　　这个问题是在组件css加载方案中碰到的

　　场景：

　　元素的样式我们可以写在style里面，也可以写到外链css里面，如果没有设置，也会读取浏览器默认的css的，现在我们要计算getComputedstyle某个元素的最终所使用的css样式

　　区别：

　　1）style 是行内样式的写法，如果style 内有值的话，就会读取出来，如果没有，那么就为空，可读可写

　　2）getComputedstyle 是读取元素的最终所使用的css的值，只读的

 

　　解决方案：

　　在ie和非ie下是不一样的处理办法的。

　　在ie下：

　　 通过element.currentStyle 可以获得当前元素的样式

　　非ie下：

　　 通过 document.defaultView.getComputedStyle(element,null) 其实window下这个方法也是存在的,可以直接通过window.getComputeStyle 的方式调用

　上述获得的是该元素上所有使用的css样式，但是如果要得到某个样式呢？ 在非ie下，则可以再后面加上getPrototyValue('attr') 的办法（ie9目前也支持了这个方法），

小于ie9的方法，目前可以通过2种方式获得，第一种方式是在后面["attr"] ,第二种方式是 在后面加上getAttribute("attr")，不过这种方式要求驼峰的方式命名

综上所述 获取元素的最终所使用的css样式可以这样写

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <body>
  <div id="test" style="float:left;color:red;backgound-color:#ddd;height:300px;width:200px;">test</div>
  <script>
    function getCurrentStyle(ele,attr){
        
        attr = (!-[1,]&& attr=="float")? "styleFloat"  :"float";

        if(document.defaultView){
            var style = document.defaultView.getComputedStyle(ele,null);
            return style ? style.getPropertyValue(attr): null;    
        }else{
            return ele.currentStyle[attr];
        }
    }

    var test = document.getElementById('test');
    
    var style = getCurrentStyle(test,"float");

    alert(style);

  </script>
 </body>
</html>
复制代码

有一点需要注意，网上说对于float 这个属性，在ie下是 styleFloat，在非ie下是cssFloat ，我在chrome17，firefox12下用cssFloat均没有测试成功。于是我干脆写成“float”，ok！

欢迎大家提出宝贵意见。　　　

posted @   yupeng  阅读(2648)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示
AI IDE Trae