Question

当我正在为网站制作样式模板时，我想制作带有背景颜色的示例块的span元素。例如：

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

应该生成一个带有颜色代码＃FF0000（红色）作为背景颜色的块。

目前，正在使用以下css和JS代码（相关位）
CSS

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

Javascript（在页面底部，就在正文之前）

<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中你也有拼写错误：

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

见工作Example

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

要选择课程，您应该使用$(".ClassName")，此处为$(".colblock")。 $("colblock")会选择标记为＆＃34; colblock＆＃34;的元素。
你的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;

如何制作一个将元素的背景颜色设置为innerhtml颜色代码的javascript？

4 个答案: