获取元素的样式属性及修改（JS）

行内样式属性值的获取与修改：

首先要获取元素，获取元素的方法在上一篇博客中进行了整理，还不会或者不熟练的小伙伴们可以翻看上篇博客哟。

假设这里已经获取到了一个div元素保存在了box变量中，那么获取他的各种样式就可以用：

box.style.属性（eg:box.style.width, box.style.height,....）

非行内样式属性的获取：

首先我们要先了解一下BOM中获取计算后样式的方法getComputedStyle(),返回值是一个css对象，是window下的方法，写的时候可以省略window，但注意getComputedStyle()方法在IE6以下版本不识别，IE6以下使用currentStyle()，所以你想到兼容想法应该如何写了吗？文章最后会给出答案。

getComputedStyle()获取样式的使用代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      div{
        /* width:200px; */
        height:200px;
        background:blue;
        font-size:20px;
        color:red;
        text-align:center;
        line-height:200px;
      }
    </style>
  </head>
  <body>
    <div style="width:200px;">今天你很棒</div>
    <script>
      //用.style获取width(行内样式)可以,但是获取height等其他样式(非行内样式)时结果为空
      // var div = document.querySelector("div");
      // console.log(div.style.width);
      // console.log(div.style.height);

      //使用getComputedStyle()(IE6以上及其他浏览器可用)
      var div=document.querySelector("div");
      var divCss=getComputedStyle(div);
      // console.log(divCss);
      console.log(divCss.width);
      console.log(divCss.height);
      console.log(divCss.fontSize);
    </script>
  </body>
</html>
<script>

结果：

通过结果可以看出通过这种方法在任何地方给元素设置的属性都可以被正确的获得，可以输出divCss看一下输出结果，里面的样式很多。

接下来是IE6以下版本的兼容写法，这里用到了try-catch捕捉异常的方法。正常条件下，JS在程序遇到错误的时候会报错，并且直接中断程序的运行，而如果只是加了if-else判断的话，那必然就存在着在不同浏览器中如果前者并不能被正确执行的时候的报错及程序终止，所以if-else思路行不通。用语言可能并不是很好理解，程序员还是需要代码来理解的，所以我们先来看一下这段不能被正确兼容的代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      div{
        width:200px;
        height:200px;
        background:blue;
      }
    </style>
  </head>
  <body>
    <div>今天你很棒</div>
    <script>
      var div=document.querySelector("div");
      //使用if-else尝试进行IE6以下浏览器的兼容写法
      if(!getComputedStyle(div)){
        var divCss=currentStyle(div);
      }
      else{
        var divCss=getComputedStyle(div);
      }
    </script>
  </body>
</html>
<script>

结果（在IE5中）：

同样，如果换过来把currentStyle()方法的结果作为判断条件在其他浏览器及IE6以上浏览器中也会报错并终止程序执行，所以这种兼容方式的写法并不现实，那该怎样正确的进行兼容呢？这里就要用到错误捕获的方法try-catch，如果有不知道try-catch是什么的小可爱们，可以看后续error的介绍中有try-catch的详细讲解。

下面就是获取元素样式的兼容写法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        margin:0;
        padding:0;
      }
      div{
        width:200px;
        height:200px;
        background:blue;
      }
    </style>
  </head>
  <body>
    <div>今天你很棒</div>
    <script>
      var div=document.getElementsByTagName("div")[0];
      //使用if-else尝试进行IE6以下浏览器的兼容写法
      // if(!getComputedStyle(div)){
      //   var divCss=currentStyle(div);
      // }
      // else{
      //   var divCss=getComputedStyle(div);
      // }

      //封装一个获取元素样式的兼容函数(使用try-catch)
      function getStyle(ele,style){
        try{
          return getComputedStyle(ele)[style];
        }catch(error){
          return ele.currentStyle[style];
        }
      }
      // 获取div的height属性值
      var divHeight=getStyle(div,"height");
      console.log(divHeight);
    </script>
  </body>
</html>
<script>

此时，不管在IE6以下版本还是其他版本及其他浏览器，都可以获取正确的元素的样式了，是不是很简单呢？

若有不正确或更好的方法欢迎大家评论，后期博客所有内容会不定时更新更好更优更全。

获取元素的样式属性及修改（JS）

おすすめ