码迷,mamicode.com
首页 > 其他好文 > 详细

获取元素的样式

时间:2021-01-13 10:31:56      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:win   tor   attr   computed   width   ret   函数   fun   window   

获取样式

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);

 

 

获取元素的样式

标签:win   tor   attr   computed   width   ret   函数   fun   window   

原文地址:https://www.cnblogs.com/mrxiachongyu/p/14260157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!