花开陌上

使用getComputedStyle获取样式

2021/3/14 00:35:01Chixm80 阅读0 点赞0 评论
#JavaScript #getComputedStyle() #currentStyle

obj.style这种方式既可以读取样式属性，也可以写样式属性，但它操作的样式属性只能是行内样式，如果要访问内嵌或者链式样式，则不可以使用这种写法。
要访问内嵌或者链式样式，可以使用getComputedStyle()和currentStyle属性的方式来访问样式。
需要注意的是：getComputedStyle()和currentStyle属性只能读样式属性，不能写样式属性。

getComputedStyle()

getComputedStyle()可访问指定元素的指定css属性的结果样式,访问格式如下：

JAVASCRIPT
// 1
getComputedStyle(需访问样式属性的元素).样式属性
//2
getComputedStyle(ele)[attr]
getComputedStyle(需访问样式属性的元素)[样式属性]
JAVASCRIPT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>获取结果样式</title>
    <style>
      div {
        width: 400px;
        height: 300px;
        background: #E15671;
      }
    </style>
  </head>
  <body>
    <div></div>
    
    <script>
      // 获取元素封装方法
      function $(str){
        return document.querySelector(str);
      }
      
      //这样写相当于获取标签的一个属性，但标签里又没有，就会出现undefined
      //let w = $('div').width;
      //console.log(w); // undefined
      
      //获取的是行间样式，如果没有行间样式，获取出来的就为空
      let w = $('div').style.width;
      console.log(w);  //
      
      // 获取的是结果样式,就是获取最终显示效果的样式，外链，内嵌，行间会有优先级
      // let w2 = window.getComputedStyle($('div')).width;
      // let w2 = window.getComputedStyle($('div'))['width'];
      // window下的方法都可以不用写window
      // getComputedStyle(ele)[attr]
      let w2 = getComputedStyle($('div'))['width'];
      console.log(w2);
      
      // 对于复合样式，如果是要获取某一样式，最好是单一属性来访问，比如背景颜色backgroundColor
      // let b2 = getComputedStyle($('div'))['background'];
      // console.log(b2);  //rgb(225, 86, 113) none repeat scroll 0% 0% / auto padding-box border-box
      
      let b2 = getComputedStyle($('div'))['backgroundColor'];
      console.log(b2); // rgb(225, 86, 113)
    </script>
  </body>
</html>

currentStyle

该属性只对IE游览器有效，对Chrome等游览器不可以，其主要是用于兼容IE6 7 8 的。

JAVASCRIPT
// 1
需访问样式属性的元素.currentStyle.样式属性
//  2
需访问样式属性的元素.currentStyle(样式属性)

要使用getComputedStyle()和currentStyle属性访问样式一般需要进行游览器兼容处理

JAVASCRIPT
// IE8以下支持的方法
var oDiv = document.querySelector('div');
      
// el.currentStyle(attr)
// 用if去判断el.currentStyle是否存在
if(oDiv.currentStyle){
    // IE8
    oDiv.currentStyle('width');
}else{
    // Chrome
    getComputedStyle(oDiv)['width'];
}

封装兼容getComputedStyle()和currentStyle

JAVASCRIPT
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>获取结果样式</title>
    <style>
      div {
        width: 400px;
        height: 300px;
        background: #E15671;
      }
    </style>
  </head>
  <body>
    <div></div>
    
    <script>
      // // IE8以下支持的方法
      var oDiv = document.querySelector('div');
      
      // // el.currentStyle(attr)
      // // 用if去判断el.currentStyle是否存在
      // if(oDiv.currentStyle){
      //   // IE8
      //   oDiv.currentStyle('width');
      // }else{
      //   // Chrome
      //   getComputedStyle(oDiv)['width'];
      // }
      
      // 封装 兼容getStyle
      // 由上面的if可以知道，获取样式需要填两个数据
      // el 元素
      // attr 样式名称
      // 然后复制写好的判断，替换下元素与属性
      // 需要注意的是，我们的目的是通过getStyle来获取结果样式
      // 所以我们还要加上return，使用return把结果返回给函数调用者
      
      function getStyle(el,attr){
        if(el.currentStyle){
          return el.currentStyle(attr);
        }else{
          return getComputedStyle(el)[attr];
        }
      }
      
      // 调用
      let w3 = getStyle(oDiv,'width');
      let h3 = getStyle(oDiv,'height');
      
      console.log(w3);  // 400px
      console.log(h3);  // 300px
    </script>
  </body>
</html>

三目运算符（三元运算符）

类似于if…else… 条件?a:b;

JAVASCRIPT
// if
let a =true
// if(a){
//     console.log(1);  // 1
// }else{
//     console.log(2);
// }
// 条件直接写?条件允许时执行问号后面的代码:条件不允许时执行冒号后面的代码;
// a?console.log(1):console.log(2);  // 1
// 
// console.log( a?1:2 )
JAVASCRIPT
// 简化之前
// function getStyle(el,attr){
//   if(el.currentStyle){
//     return el.currentStyle(attr);
//   }else{
//     return getComputedStyle(el)[attr];
//   }
// }
  
// 简化之后
// 三目 - 条件内js语句不超过1句    
function getStyle(el,attr){
    return el.currentStyle?el.currentStyle(attr):getComputedStyle(el)[attr];
}

评论区