标签：box console log width 样式 元素 getComputedStyle 获取 var

获取样式

window.getComputedStyle(标签.想要获取的属性) //后面的.可加可不加

var obj = window.getComputedStyle(box);
console.log( window.getComputedStyle(box) );
console.log(obj.width);

 

通过点按钮使方块宽度增加：

document.querySelector("button").onclick = function(){
     var timer = setInterval(function(){
        // 获取宽
         var obj = window.getComputedStyle(box);
         var w = obj.width
         w = parseInt(w)
           w += 10
         if(w>=700){
             clearInterval(timer)
         }
         box.style.width = w + "px"
          // console.log(w);
     },50)
 }

注意：不要拿颜色值判断

console.log( getComputedStyle(box)['background-color'] );  

有兼容性问题的

var box = document.getElementsByTagName('div')
box = box[0]
console.log(getComputedStyle(box).width);
 在ie中使用：   标签.currentStlye

 console.log(box.currentStyle.height);

兼容的获取样式的函数

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return getComputedStyle(ele)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}

var h = getStyle(box,'background-color')
console.log(h);

var w = getStyle(box,'width')
console.log(w);

 

 

标签：box,console,log,width,样式,元素,getComputedStyle,获取,var
来源： https://www.cnblogs.com/mrxiachongyu/p/14260157.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。