div class change color from color name to color #code

Question

我想使用顏色代碼。例如＃e06666而不是紅色。

content.push('<p><div class="color red"></div>Whole Foods Market</p>'); 

我應該怎麼做？

Answer 1

在這個具體的例子中，你應該使用：

content.push('<p><div class="color" style="color:#e06666"></div>Whole Foods Market</p>'); 

然而，這是更好的定義CSS樣式：

.custom-color { 
    color: #e06666; 
} 

，並設置一類爲DIV標籤：

content.push('<p><div class="color custom-color"></div>Whole Foods Market</p>'); 

Answer 2

content.push('<p><div style="color = #e06666"></div>Whole Foods Market</p>'); 

Answer 3

由於這是一個類而不是顏色參考，因此您必須找到您的css文件，該文件將在您的頁面上使用標籤定義，或者您的頁面上可能包含.red類。

在任何一個位置你都應該看到類似的東西。

.red{ 
    color:red; 
} 

替換的顏色：紅;與顏色一致：＃e06666;

Answer 4

你可以使用window.getComputedStyle()"red"關鍵字rgb()值，轉換rgb()爲十六進制看到RGB to Hex and Hex to RGB。

//https://stackoverflow.com/a/5624139/ 
 
function componentToHex(c) { 
 
    var hex = c.toString(16); 
 
    return hex.length == 1 ? "0" + hex : hex; 
 
} 
 

 
function rgbToHex(r, g, b) { 
 
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); 
 
} 
 

 
var content = []; 
 

 
var div = document.createElement("div"); 
 
document.body.appendChild(div); 
 
div.style.color = "red"; 
 

 
content.push(`<p><div class="color ${rgbToHex.apply(null, window.getComputedStyle(div).color.match(/\d+/g).map(Number))}"></div>Whole Foods Market</p>`); 
 

 
console.log(content);