无法使用 javascript 获取背景样式

Question

我正在尝试获取test div 的简单十六进制代码值。我遵循与this 帖子完全相同的原则，尽管我不明白。应该登录到控制台的是十六进制代码#0ff0ff

var test = document.getElementById('test'),
    window.getComputedStyle(test);

console.log(style.getPropertyValue('background'));

#test {
  background: #0ff0ff;
}

<div id='test'>test</div>

任何想法我哪里出错了？感谢您的帮助

Answer 1

将 RGB 从 theblackgigant's answer 添加到 HEX CODE。 RGB转十六进制代码Erick Petrucelli's Solution

var test = document.getElementById("test");

//Get the color Code
  var theCSSprop = window.getComputedStyle(test, null).getPropertyValue("background-color");
  
//Most browsers seem to return the RGB value
//Function to Convert RGB to Hex Code
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

//Output
console.log(rgb2hex(theCSSprop));

#test {
  background: #0ff0ff;
}

<div id='test'>test</div>

Answer 2

您没有将window.getComputedStyle(test) 的值存储在变量style 中。

请注意，getPropertyValue('background-color') 返回的是 RGB 值而不是 HEX 代码。

var test = document.getElementById('test');

var style = window.getComputedStyle(test);

console.log(style.getPropertyValue('background-color'));

#test {
  background: #0ff0ff;
}

<div id='test'>test</div>