如何製作一個將元素的背景顏色設置爲innerhtml顏色代碼的JavaScript？

-2

當我爲一個網站製作一個樣式模板時，我想使用背景顏色來創建來自示例塊的span元素。例如：如何製作一個將元素的背景顏色設置爲innerhtml顏色代碼的JavaScript？

<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，這應該去工作，但事實並非如此。有人能讓我放鬆嗎？

來源

2015-05-18 ZeroThe2nd

其內容的顏色相反的，你可以有特定的寬度和高度與背景顏色：＃FF0000 – sasi

的你的CSS定義中的<<'是不正確的。 – reporter

這裏的概念是讓span元素使用其內部的顏色代碼作爲背景顏色，以避免輸入CSS的負載。 – ZeroThe2nd

使用$(this).text()研究所的$(this).html()

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

而且在你的CSS <span.colblock EAD應該是這樣的：span.colblock

來源

2015-05-18 08:45:20

在按類選擇元素時使用.運算符。你有錯誤的位置：

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

使用下列內容：

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

在CSS中也有你錯字：

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

見工作Example

來源

2015-05-18 08:43:34 Manwal

不使用JQuery

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

來源

2015-05-18 08:48:12

要選擇一類，你應該使用$(".ClassName")，在這裏將是$(".colblock")。 $("colblock")將選擇標籤名稱爲「colblock」的元素。
你的jQuery鏈接似乎死了。

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

這一個工程，我測試：

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

來源

2015-05-18 09:04:01 astropeak

如何製作一個將元素的背景顏色設置爲innerhtml顏色代碼的JavaScript？

回答

相關問題