我寫了一個jQuery插件，它接受一些參數的css顏色。驗證CSS顏色名稱

我想驗證它們。如果它只是一個十六進制或rgb值，我可以用正則表達式來實現，但是如何驗證所有147個有效的顏色名稱而不會使插件膨脹？

我想知道是否有某種方法試圖應用樣式（可能與jQuery），然後從瀏覽器捕獲錯誤，如果它是無效的？

編輯：powtac和潘泰利斯想出了一個解決方案，但他們都錯過了邊緣的情況下，所以我在這裏，包括一個完整的解決方案：

var validateCssColour = function(colour){ 
    var rgb = $('<div style="color:#28e32a">');  // Use a non standard dummy colour to ease checking for edge cases 
    var valid_rgb = "rgb(40, 227, 42)"; 
    rgb.css("color", colour); 
    if(rgb.css('color') == valid_rgb && colour != ':#28e32a' && colour.replace(/ /g,"") != valid_rgb.replace(/ /g,"")) 
     return false; 
    else 
     return true; 
};

來源

2011-06-17 SystemicPlural

非常有趣的問題。我喜歡。 – Patricia 2011-06-17 13:03:33

我以爲只有17個（數橙色）？ – kennebec 2011-06-17 13:17:38

@kennebec：看到http://www.w3schools.com/css/css_colornames.asp – SystemicPlural 2011-06-17 13:42:38

當所討論的字符串與測試顏色相同時，所有發佈在此頁面上的解決方案都不正確。當然，你可以使用一種非常不可能的顏色選擇，但我寧願去100％的成功率。

OP在他的代碼中有一個單獨的拼寫錯誤（請參閱帶冒號的條件），並且不會測試「＃28e32a」，所以顏色會失敗，並且正則表達式會將顏色內的空白摺疊掉，所以「＃28e 32a 「將（錯誤地）通過。

在正常的JavaScript，這應該有100％的成功：

function validTextColour(stringToTest) { 
    //Alter the following conditions according to your need. 
    if (stringToTest === "") { return false; } 
    if (stringToTest === "inherit") { return false; } 
    if (stringToTest === "transparent") { return false; } 

    var image = document.createElement("img"); 
    image.style.color = "rgb(0, 0, 0)"; 
    image.style.color = stringToTest; 
    if (image.style.color !== "rgb(0, 0, 0)") { return true; } 
    image.style.color = "rgb(255, 255, 255)"; 
    image.style.color = stringToTest; 
    return image.style.color !== "rgb(255, 255, 255)"; 
}

的jsfiddle：http://jsfiddle.net/WK_of_Angmar/xgA5C/

來源

2013-06-07 23:02:01

我想你可以使用腳本從這個page，做正是你想要的：你傳遞一個字符串，並試圖找出顏色。好吧，這不完全是你想要做的，但它應該工作。

我認爲在任何情況下，在某些時候你應該做一個名稱查找（我不認爲有一些神奇的方式來確定字符串「淡藍色」的十六進制值），所以只需要抓取一些工作其他人已經完成了（腳本是由斯托揚Stefanov，這是非常好的JavaScript，我已經閱讀了他的一些好書，如果他做了查找，以及我不認爲有另一種解決方案）

來源

2011-06-17 13:05:44

在這裏， http://jsfiddle.net/vSXNK/

它匆匆寫成，但它的工作原理。

來源

2011-06-17 13:05:50 Pantelis

失敗的黑色......但你可以檢查：`if（color ==「black」）OK else validation_code` – BrunoLM 2011-06-17 13:11:57

您可以簡單地將顏色設置爲虛擬元素，然後檢查元素的值是否爲白色以外的值。

colorToTest = 'lime'; // 'lightgray' does not work for IE 

$('#dummy').css('backgroundColor', 'white'); 
$('#dummy').css('backgroundColor', colorToTest); 
if ($('#dummy').css('backgroundColor') != 'rgb(255, 255, 255)' || colorToTest == 'white') { 
    alert(colorToTest+' is valid'); 
}

來源

2011-06-17 13:06:23 powtac

我知道這個問題是相當老了，但我想出了一個純JavaScript解決方案檢查顏色這似乎在每一個瀏覽器工作，並希望分享它

此功能使用瀏覽器的任何輸入字符串轉換爲CSS顏色字符串（如果可能）

function getColorCSS(c) { 
    var ele = document.createElement("div"); 
    ele.style.color = c; 
    return ele.style.color.split(/\s+/).join('').toLowerCase(); 
}

讓我們來看看基於不同的輸入功能輸出...

無效輸入

基本上隨時隨地瀏覽器無法弄清楚如何使輸入字符串作爲顏色返回empty string這使得這個小功能完善的用於檢測無效顏色字符串！

redd，#f0gf0g，#1234，f00，rgb(1,2)，rgb(1,2,3.0)，rgb(1,2,3,4)，rgba(100,150,200)
- 。。。 chrome
- 。。。 firefox
- 。。。 的Internet Explorer

有效輸入

aqua
- aqua。。。 chrome
- aqua。。。 firefox
- aqua。。。 的Internet Explorer

pink
- rgb(255,192,203)。。。 chrome將所有有效的HTML顏色名稱轉換爲rgb格式，但以下17除外，我不確定爲什麼["aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red", "silver", "teal", "white", "yellow"]
- pink。。。 firefox
- pink。。。的Internet Explorer

#f00，#ff0000，rgb(255,0,0)
- rgb(255,0,0)。。。 chrome
- rgb(255,0,0)。。。 firefox
- rgb(255,0,0)。。。 的Internet Explorer

rgba(255,0,0,1.0)，rgba(255,0,0,100)
- rgb(255,0,0)。。。鉻轉換rgba到rgb隨時alpha是1.0或更大，因爲它是完全不透明反正（可能是性能）
- rgb(255,0,0)。。。 firefox做的和鉻相同
- rgba(255,0,0,1)。。。 的Internet Explorer從1.0或更大的α-PARAM轉換爲1

rgba(0,255,0,0.5)
- rgba(0,255,0,0.498039)。。。 chrome返回與其他瀏覽器不同的東西（可能是交易的準確性）
- rgba(0,255,0,0.5)。。。 firefox
- rgba(0,255,0,0.5)。。。 的Internet Explorer

rgba(0,0,255,0.0)，rgba(0,0,255,-100)
- rgba(0,0,255,0)。。。chrome將alpha參數從0.0或更低轉換爲0
- rgba(0,0,255,0)。。。 firefox也一樣
- rgba(0,0,255,0)。。。 的Internet Explorer做同樣的

rgba(0,0,0,0)，rgba(0,0,0,-100)
- rgba(0,0,0,0)。。。 chrome
- transparent。。。火狐只有這一個rgba實例與
- rgba(0,0,0,0)設置爲0這個詞transparent（怪）所有參數轉換。。。 的Internet Explorer

hsl(180,50%,50%)
- rgb(63,191,191)。。。 chrome
- ff rgb(63,191,191)。。。 firefox
- ie hsl(180,50%,50%)。。。 的Internet Explorer

hsl(x,x,0%)
- rgb(0,0,0)。。。 chrome
- rgb(0,0,0)。。。 firefox
- hsl(0,0%,0%)。。。的Internet Explorer的black任何HSL表示轉換到這個

hsl(x,x,100%)
- rgb(255,255,255)。。。 chrome
- rgb(255,255,255)。。。 firefox
- hsl(0,0%,100%)。。。 的Internet Explorer的white任何HSL表示轉換到這個

hsla(180,50%,50%,1.0)，hsla(180,50%,50%,100)
- rgba(63,191,191,1)。。。 chrome
- rgba(63,191,191,1)。。。 firefox
- hsla(180,50%,50%,1)。。。 的Internet Explorer

hsla(180,50%,50%,0.5)
- rgba(63,191,191,0.498039)。。。 chrome
- rgba(63,191,191,0.5)。。。 firefox
- hsla(180,50%,50%,0.5)。。。 的Internet Explorer

hsla(0,0%,0%,0.0)，hsla(0,0%,0%,-100)
- rgba(0,0,0,0)。。。 chrome
- transparent。。。firefox是一致的，但這種轉換仍然看起來很奇怪
- hsla(180,50%,50%,0)。。。 的Internet Explorer

哇，我簡直不敢相信我剛剛花了2個小時的測試該功能在不同的瀏覽器！

我想我可以使用功能以及演示，而我在這...

function getColorCSS(c) { 
 
    \t var ele = document.createElement("div"); 
 
\t ele.style.color = c; 
 
\t return ele.style.color.split(/\s+/).join('').toLowerCase(); 
 
} 
 

 
function isColorValid(c) { 
 
\t var s = getColorCSS(c); 
 
\t return (s) ? true : false; 
 
} 
 

 
function isColorTransparent(c) { 
 
\t var s = getColorCSS(c); 
 
\t return (
 
\t \t s === "transparent" || 
 
\t \t s.substring(0,4) === "rgba" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 || 
 
\t \t s.substring(0,4) === "hsla" && +s.replace(/^.*,(.+)\)/,'$1') <= 0 
 
\t); 
 
} 
 

 
function isColorWhite(c) { 
 
\t var s = getColorCSS(c); 
 
\t return [ 
 
\t \t "white", 
 
\t \t "rgb(255,255,255)", 
 
\t \t "rgba(255,255,255,1)", 
 
\t \t "hsl(0,0%,100%)", 
 
\t \t "hsla(0,0%,100%,1)" 
 
\t ].indexOf(s) > -1; 
 
} 
 

 
function isColorBlack(c) { 
 
\t var s = getColorCSS(c); 
 
\t return [ 
 
\t \t "black", 
 
\t \t "rgb(0,0,0)", 
 
\t \t "rgba(0,0,0,1)", 
 
\t \t "hsl(0,0%,0%)", 
 
\t \t "hsla(0,0%,0%,1)" 
 
\t ].indexOf(s) > -1; 
 
} 
 

 
function checkColorString() { 
 
    var c = document.getElementById("c").value; 
 
    
 
    if (c === "") { 
 
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
    document.getElementById("result").innerHTML = ''; 
 
    } 
 
    else if (isColorValid(c)) { 
 
    if (isColorTransparent(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
     document.getElementById("result").innerHTML = '<span style="color:#dadada;">TRANSPARENT</span>'; 
 
    } 
 
    else if (isColorWhite(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = '<span style="color:black;">WHITE</span>'; 
 
    } 
 
    else if (isColorBlack(c)) { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = '<span style="color:white;">BLACK</span>'; 
 
    } 
 
    else { 
 
     document.getElementsByTagName("body")[0].style.backgroundColor = getColorCSS(c); 
 
     document.getElementById("result").innerHTML = getColorCSS(c); 
 
    } 
 
    } 
 
    else { 
 
    document.getElementsByTagName("body")[0].style.backgroundColor = 'transparent'; 
 
    document.getElementById("result").innerHTML = '<span style="font-size:42px;color:#dadada;">&#9785</span>'; 
 
    } 
 
} 
 

 
var eventList = ["change", "keyup", "paste", "input", "propertychange"]; 
 
for(event of eventList) { 
 
    document.getElementById("c").addEventListener(event, function() { 
 
     checkColorString(); 
 
    }); 
 
}

#c { 
 
    width: 300px; 
 
    padding: 6px; 
 
    font-family: courier; 
 
} 
 

 
#result { 
 
    font-family: courier; 
 
    font-size: 24px; 
 
    padding: 12px 6px; 
 
}

<input id="c" placeholder="Enter any valid CSS color..."></input> 
 
<div id="result"></div>

來源

2015-10-17 09:08:31 DaveAlger

驗證CSS顏色名稱

回答

無效輸入

`redd`，`#f0gf0g`，`#1234`，`f00`，`rgb(1,2)`，`rgb(1,2,3.0)`，`rgb(1,2,3,4)`，`rgba(100,150,200)`

有效輸入

`aqua`

`pink`

`#f00`，`#ff0000`，`rgb(255,0,0)`

`rgba(255,0,0,1.0)`，`rgba(255,0,0,100)`

`rgba(0,0,255,0.0)`，`rgba(0,0,255,-100)`

`rgba(0,0,0,0)`，`rgba(0,0,0,-100)`

`hsl(180,50%,50%)`

`hsl(x,x,0%)`

`hsl(x,x,100%)`

`hsla(180,50%,50%,1.0)`，`hsla(180,50%,50%,100)`

`hsla(180,50%,50%,0.5)`

`hsla(0,0%,0%,0.0)`，`hsla(0,0%,0%,-100)`

驗證CSS顏色名稱

回答

無效輸入

redd，#f0gf0g，#1234，f00，rgb(1,2)，rgb(1,2,3.0)，rgb(1,2,3,4)，rgba(100,150,200)

有效輸入

aqua

pink

#f00，#ff0000，rgb(255,0,0)

rgba(255,0,0,1.0)，rgba(255,0,0,100)

rgba(0,0,255,0.0)，rgba(0,0,255,-100)

rgba(0,0,0,0)，rgba(0,0,0,-100)

hsl(180,50%,50%)

hsl(x,x,0%)

hsl(x,x,100%)

hsla(180,50%,50%,1.0)，hsla(180,50%,50%,100)

hsla(180,50%,50%,0.5)

hsla(0,0%,0%,0.0)，hsla(0,0%,0%,-100)

相關問題

`redd`，`#f0gf0g`，`#1234`，`f00`，`rgb(1,2)`，`rgb(1,2,3.0)`，`rgb(1,2,3,4)`，`rgba(100,150,200)`

`aqua`

`pink`

`#f00`，`#ff0000`，`rgb(255,0,0)`

`rgba(255,0,0,1.0)`，`rgba(255,0,0,100)`

`rgba(0,0,255,0.0)`，`rgba(0,0,255,-100)`

`rgba(0,0,0,0)`，`rgba(0,0,0,-100)`

`hsl(180,50%,50%)`

`hsl(x,x,0%)`

`hsl(x,x,100%)`

`hsla(180,50%,50%,1.0)`，`hsla(180,50%,50%,100)`

`hsla(180,50%,50%,0.5)`

`hsla(0,0%,0%,0.0)`，`hsla(0,0%,0%,-100)`