chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

js获取css样式三种方法 #68

Open liukexina opened 3 years ago

liukexina commented 3 years ago
  1. style

针对css样式里background-color\margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor

style方法只能获取元素的内联样式,对于内部样式和外联样式,这种方法则不能取得,这时就要使用其他方法进行获取,而在这种情况下进行样式获取时,不同的浏览器又有不同的处理方式(主要是ie和非ie)。

  1. currentStyle(IE)
    var oDiv = document.getElementById('div');
    var styles = oDiv.currentStyle;
    styles.width;
  2. getComputedStyle(非IE)
    var oDiv = document.getElementById('div');
    var style = window.getComputedStyle(oDiv, null);
    styles.width;

    封装方法:

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

    注意:

    • 后两个方法需要传两个参数,obj是将要获取样式的元素,attr则是样式的属性,如width、color等,调用此方法时attr必须要加上引号,不然会报错;
    • 此方法只能获取单一属性样式,像border、background等具有综合属性的样式,只有chrome浏览器能获取;而其他浏览器只能通过borderStyleColor这种驼峰命名的单一属性来取得