获得元素实际属性值

获得当前实际宽高的思路之一是：当你已经知道元素的缩放值，那么由你所得到的实际尺寸乘以缩放值。

 

还有一个方法：getComputedStyle(“元素”，“伪类”)

看到一个音乐播放的实例觉得很棒，这里记录一下，链接网址是：https://codepen.io/HaoyCn/pen/BZZrLd

var isPlaying  = true;
var music = document.querySelector(".music");
var music_wrapper = document.querySelector(".music_wrapper");
music.addEventListener("click",function bindEvent(){
    isPlaying ? pause() : play();
})
function pause(){
    var iRotate = getComputedStyle(music).transform;
    var wRotate = getComputedStyle(music_wrapper).transform;
    music_wrapper.style.transform = 
    wRotate === "none" ? iRotate : iRotate.concat("",wRotate);
    music.classList.remove("music_animate");
    isPlaying = false;
}
function play(){
    music.classList.add("music_animate");
    isPlaying = true;
}

语法：getComputedStyle(“元素”，“伪类”);
获取当前元素所有最终使用的css属性值,返回“css样式声明对象”[object CSSStyleDeclaration]

这是一个只读方法，获取所有的css属性对象，包括默认的。
而ele.style的方法虽然可读可写，但是只能获取样式列表里面的属性样式。

getComputedStyle(music).transform这里使用的是键值访问，但一些属性值不支持这种写法，比如说float，
这时要这样写：getComputedStyle(music,null).getPropertyValue("float");

转载于:https://www.cnblogs.com/binga/p/8351949.html