我怎样才能使javascript设置元素的背景颜色为innerhtml颜色代码

Question

当我为一个网站制作一个样式模板时，我想使span元素从具有背景颜色的示例块。例子:

<span class='colblock'>#FF0000</span>

应该产生一个颜色代码为#FF0000(红色)的块作为背景色。

css 目前使用的css和JS代码如下(相关代码)

<style>
    span.colblock{
        margin:8px;
        padding:8px;
        display:block;
        border:1px solid black;
        border-radius:2px;
        width:66px;
    }
</style>

Javascript(在页面底部，body之前)

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $("colblock").each(function() {
        var ccode = $(this).html();
        $(this).css("background-color", ccode);
    });
</script>

IMO，这应该是工作，但它没有。有人能开导我吗?

Answer 1

按类选择元素时使用.操作符。这里有错误:

$(".colblock").each(function() {
   ^ //missed '.' dot 

使用以下:

$(".colblock").each(function() {
    var ccode = $(this).html();
    $(this).css("background-color", ccode);
});

---

在css中还有typo:

<span.colblock{
^ //===> should be removed

参见工作示例

Answer 2

用$(this).text()代替$(this).html()

$(".colblock").each(function() {
        var ccode = $(this).text();
        $(this).css("background-color", ccode);
    });

在你的css中<span.colblock应该是这样的:span.colblock

Answer 3

1. 要选择一个类，您应该使用$(".ClassName")，这里将是$(".colblock")。$("colblock")将选择标签名称为"colblock"的元素

2. 你的jquery链接似乎死了。

   src="//code.jquery.com/jquery-migrate-1.2.1.min.js"

   这个在我的测试中工作:

   src="http://code.jquery.com/jquery-1.2.1.min.js"

Answer 4

不使用JQuery

var the_Span = document.getElementById("colblock");
var span_Text = the_Span.innerText;
the_Span.style.backgroundColor = span_Text;