js 获取元素的具体样式信息getcss(实例讲解)

/*
      curEle:[object] 当前要操作的元素对象 
      attr:[string] 我们要获取的样式属性的名称
      1、使用try、catch来处理兼容（只有在不得已的情况下）
        前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
        不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
      2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
      3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
      获取当前浏览器是IE6-8
      
    */
    function getCss(curEle,attr){
      var val = null;
      //方法2
      if("window.getComputedStyle" in window){//或者window.getComputedStyle
        var = window.getComputedStyle(curEle,null)[attr];
      }else{
        var = curEle.currentStyle[attr];
      }
      //方法1
      try{
        var = window.getComputedStyle(curEle,null)[attr];
      }catch(e){
        var = curEle.currentStyle[attr];
      }
      //方法3
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        var = curEle.currentStyle[attr];
      }else{
        var = window.getComputedStyle(curEle,null)[attr];
      }
      return val;    
    }

console.log(getCss(box,"border"))
    console.log(getCss(box,"fontFamily"))

function getCss(curEle,attr){
      var val = null;
      var reg = null;
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        var = curEle.currentStyle[attr];
      }else{
        var = window.getComputedStyle(curEle,null)[attr];
      }
      reg = /^(-"color: #ff0000">第二次升级：有些样式属性在不同的浏览器中是不兼容的，例如opacity



function getCss(curEle,attr){
      var val = null;
      var reg = null;
      if(/MSIE (6|7|8)/.test(navigator.userAgent)){
        if(attr==="opacity"){
          val = curEle.currentStyle["filter"];
          //把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致
          reg = /^alpha\(opacity=(\d+("background-color: #ccffcc">在补充一个小的知识点:伪类

:before  :after  在一个元素便签的前面或者后面创建一个新的虚拟标签，我们可以给这个虚拟标签增加样式，也可以增加内容等...也可以通过伪类来进行清除浮动 可以通过如下方式获取 window.getComputedStyle(box,"before").content
以上这篇js 获取元素的具体样式信息getcss(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。