将CSS属性嵌入HTML中

Question

我正在处理一个网站的颜色主题，希望在刷新时更改，而且想在HTML中显示CSS背景颜色属性。这是否可行？

例如：

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

会显示类似于

"现在的颜色是 #DB0C0C。刷新以进行彩妆"

由于十六进制颜色基于加载的样式表而变化，我不想硬编码它。如果我有一个名为 @color 的 ruby 变量，其值为 #ff0000，并且想要在 html 中显示它，我可以执行以下操作：

<%= @color%>

我想知道是否有类似的方法可以访问CSS属性。

- bsiddiqui

---

你有什么原因不能直接写进去吗？ - Daedalus

根据您的编辑，您需要使用JavaScript。否则，没有纯CSS / HTML方法可以获取该值。 - Daedalus

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;

然而，似乎这并没有给出十六进制颜色值，而是一个“rgb(x, y, z)”字符串。要从中获取十六进制颜色值，您可以使用正则表达式解析它并返回结果：

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;
}

演示

- Daedalus

Answer 2

你可以在jQuery中使用.css()函数。

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

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

- Seer