Question

我有一个网站的颜色主题我正在努力改变刷新，并希望在我的HTML中显示css背景颜色属性。这可能吗？

即

<footer>The color of the moment is <insert the background color attribute>. Refresh for a makeover</footer>

会显示类似

的内容

“当下的颜色是＃DB0C0C。刷新以进行改造”

由于十六进制颜色根据加载的样式表而改变，我不想对其进行硬编码。如果我有一个ruby变量@color which =＃ff0000并想在html中显示它我可以做类似的事情

<%= @color%>

我想知道是否有办法做类似访问CSS属性的事情。

Answer 1

你甚至不需要jQuery ...你只能使用.getComputedStyle()的香草javascript：

<span id='color-map'></span>

var element = document.getElementById("id-goes-here");
var style = window.getComputedStyle(element);

document.getElementById('color-map').innerHTML = style.backgroundColor;

但是，这似乎不会将颜色作为十六进制，而是一个'rpg（x，y，z）'字符串。要从中获取十六进制，可以使用regex解析它并返回结果：

function rgbsToHex(str) {
    var hex = "#";
    var matches = str.match(/rgb\((\d+),\s(\d+),\s(\d+)\)/);
    hex += Number(matches[1]).toString(16);
    hex += Number(matches[2]).toString(16);
    hex += Number(matches[3]).toString(16);
    return hex;
}

DEMO

Answer 2

您可以在jQuery中使用.css（）函数。

$('footer').find('span').text($('.bg').css('background-color'));

这将为您提供rgb中的颜色，如果您想在HEX中显示它，请查看this以获取更多信息。

在HTML中嵌入CSS属性

2 个答案: