javascript - 从元素中获取 CSS 值

Question

我需要使用 web storage api 将元素的样式更改存储在一页上。我实际上不知道如何做到这一点，但我想我会先获取 已更改的 CSS 属性并将其存储在数组中。我试图跟随这里发生的事情并根据我的问题对其进行调整。

这是我为获取值而尝试的方法，但我不确定它是否正确：

function newItem(){
    var bgImg = document.getElementsByTagName('body').bgImg[0].style.getPropertyValue('background');
    var wideScreen = getElementById('sidebar').style.getPropertyValue('display');
    var playerColor = getElementById('video_container').style.getPropertyValue('background-color');     
    }

我不确定我上面编写的代码是否获取了我需要的信息。

Answer 1

您可以使用getComputedStyle().

getComputedStyle()给出一个元素的所有 CSS 属性的最终使用值。

var element = document.getElementById('sidebar'),
    style = window.getComputedStyle(element),
    display = style.getPropertyValue('display');


var element = document.getElementById('video_container'),
    style = window.getComputedStyle(element),
    bg = style.getPropertyValue('background-color');