无法返回 HTML 元素的 css 属性 [重复]答案

【问题标题】：cannot return css property of HTML element [duplicate]无法返回 HTML 元素的 css 属性 [重复]
【发布时间】：2014-08-16 03:24:22
【问题描述】：

HTML中有元素：<div id="block"></div>，通过CSS属性：

#block { 
    background: red;
 }

如果我想在 JavaScript 中将 CSS 中的属性分配给某个变量，如下所示：

var value = document.getElementById('block').style.background // It doesn't work

我该如何解决这个问题？

【问题讨论】：

您忘记了d。文件不是文件吗；）
顺便说一句：对于颜色，请在 CSS 中使用 background-color，在 Javascript 中使用 backgroundColor。
它不适用于任何 CSS 属性
style 对象仅包含本地样式 - 那些在元素上直接设置的样式。获得通过所有样式表级联的有效样式有点痛苦，并且在（旧）IE 和其他浏览器之间有所不同。这是框架可以帮助您完成的更有用的事情之一。
@JacobLutin：那是因为它是通过 CSS 实现的。请参阅上面的 Pointy 的评论和下面的 j08691 的回答。

【解决方案1】：

你可以使用getComputedStyle:

var value = window.getComputedStyle(document.getElementById('block')).getPropertyValue("background-color");
console.log(value);

【讨论】：

【解决方案2】：

您可以为此使用单行 jQuery：

var value = $("#block").css("background-color");

【讨论】：

它与问题有什么关系？
每当我们分配背景时：;对于元素，它被存储为该元素的背景颜色属性。根据问题，JacobLutin 想要提取 div#block 的属性 background-color 的值并将其分配给某个变量。并且 var value = $("#block").css("background-color");符合要求。
我的意思是这个问题没有被标记为 jQuery。问题是无法通过 Javascript 中的“样式”属性获取属性。
好的，我知道了。错误地没有专注于它。

【解决方案3】：

如果你可以在你的项目中使用 jQuery，我推荐使用 .css() jquery 函数

例如：设置css

$('#block').css({background:'black'});

获取css：

var cssValues = $('#block').css('background'});

查看更多关于此here

【讨论】：

【解决方案4】：

你可以试试这个——

var  block = document.getElementById("block");
block.setAttribute("style","background-color: red;");

【讨论】：