• js中获取css样式属性值


    关于js中style,currentStyle和getComputedStyle几个注意的地方

    (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。针对css样式里background-color;margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor。

    (2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE。

    (3)getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。

      注意:

        ① currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。

        ② 如果要设置相应值,应使用style。

    补充:

    内联方式:样式定义在单个的HTML元素中 ,如<p style="font-size:16px;">测试例子</p>

    内部样式表:样式定义在HTML页的头元素中 

    外部样式表:将样式定义在一个外部的CSS文件中(.css文件),由HTML页面引用样式表文件 

    保证兼容的做法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>js中获取css样式属性值</title>
      <style type="text/css">
      #div1{
        width:200px; 
        height:200px; 
        background:#ddd;
      }
      </style>
    </head>
    <body>
      <div id="div1" style="100px;background-color:green;"></div>
    </body>
    <script type="text/javascript">
    window.onload=function(){  
       var oDiv=document.getElementById('div1');
       //使用style属性只能获取到内联样式
       console.log(oDiv.style.backgroundColor);
       console.log(getStyle(oDiv,'background'));
    }
    
    function getStyle(obj, attr){  
        //只适用于IE
        if(obj.currentStyle){
            return obj.currentStyle[attr]; 
        }else{ 
            //适用于FF,Chrome,Safa 
            return getComputedStyle(obj,false)[attr];  
        }
    }  
    </script>
    </html>

     关于window.getComputedStyle(element, [pseudoElt])

    参数解析:

    (1).element:必需,要获取样式值的元素对象。

    (2).pseudoElt:可选,表示指定节点的伪元素(:before、:after、:first-line、:first-letter等)。

    获取样式属性升级版:

    function getStyle(obj, attr , pseudoElt=false){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,pseudoElt)[attr]
    }

    源代码地址:https://github.com/zuobaiquan/javascript/blob/master/js中获取css样式属性值.html

  • 相关阅读:
    MySQL++:(转)mybatis 常用 jdbcType数据类型
    CF1556F Sports Betting (状压枚举子集DP)
    ICPC Greater New York Region 2020 F
    post方式实现导出/下载文件
    自定义一个v-if
    在vue项目中引用element-ui时 让el-input 获取焦点的方法
    element-select当下拉框数据过多使用懒加载
    vue强制刷新组件更新数据的方式
    .net core efcore dbfirst(sqlserver,mysql,oracle,postgresql)
    camunda安装配置mysql以及整合springboot
  • 原文地址:https://www.cnblogs.com/zuobaiquan01/p/8461754.html
Copyright © 2020-2023  润新知