Подтвердить что ты не робот

Проверка имен цветов css

Я написал плагин jQuery, который принимает цвета css для некоторых его параметров.

Я хочу проверить их. Если бы это было просто значение hex или rgb, я мог бы сделать это с помощью обычного выражения, но как я могу проверить все 147 допустимых имен цветов без раздувания плагина?

Мне было интересно, есть ли способ применить стиль (возможно, с jquery), а затем поймать ошибку в браузере, если это недействительно?

Edit: powtac и Pantelis придумали решение, но оба они пропустили край, поэтому я включаю здесь полное решение:

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;
};
4b9b3361

ОТВЕТЫ

Ответ 1

Все решения, размещенные на этой странице, неверны, если указанная строка соответствует цвету теста. Конечно, вы можете использовать очень маловероятный выбор цвета, но я бы предпочел пойти на 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/

Ответ 2

Вы можете просто установить цвет в фиктивный элемент, а затем проверить, является ли значение элемента чем-то отличным от белого.

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');
}

Ответ 3

Я знаю, что этот вопрос довольно старый, но я придумал решение чистого 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)

    • ., хром
    • ., светлячок
    • ., интернет-исследователь

 

VALID INPUTS

  • aqua

    • aqua., хром
    • aqua., светлячок
    • aqua., интернет-исследователь

 

  • 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., светлячок
    • pink., интернет-исследователь

 

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

    • rgb(255,0,0)., хром
    • rgb(255,0,0)., светлячок
    • rgb(255,0,0)., интернет-исследователь

 

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

    • rgb(255,0,0)., Хром преобразует rgba в rgb в любое время альфа 1.0 или больше, поскольку он полностью непрозрачен (возможно, для производительности)
    • rgb(255,0,0)., firefox делает то же самое, что и хром
    • rgba(255,0,0,1)., Internet Explorer преобразует альфа-параметр из 1.0 или больше в 1

 

  • rgba(0,255,0,0.5)

    • rgba(0,255,0,0.498039)., хром возвращает что-то иное, чем другие браузеры (возможно, точность торговли для производительности)
    • rgba(0,255,0,0.5)., светлячок
    • rgba(0,255,0,0.5)., интернет-исследователь

 

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

    • rgba(0,0,255,0)., Хром преобразует альфа-параметр из 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)., хром
    • transparent., firefox преобразует только этот экземпляр rgba со всеми параметрами, установленными в 0, на слово transparent (странно)
    • rgba(0,0,0,0)., интернет-исследователь

 

  • hsl(180,50%,50%)

    • rgb(63,191,191)., хром
    • ff rgb(63,191,191)., светлячок
    • т.е. hsl(180,50%,50%)., интернет-исследователь

 

  • hsl(x,x,0%)

    • rgb(0,0,0)., хром
    • rgb(0,0,0)., светлячок
    • hsl(0,0%,0%)., Internet explorer преобразует любое hsl-представление black в это

 

  • hsl(x,x,100%)

    • rgb(255,255,255)., хром
    • rgb(255,255,255)., светлячок
    • hsl(0,0%,100%)., Internet explorer преобразует любое hsl-представление white в это

 

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

    • rgba(63,191,191,1)., хром
    • rgba(63,191,191,1)., светлячок
    • hsla(180,50%,50%,1)., интернет-исследователь

 

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

    • rgba(63,191,191,0.498039)., хром
    • rgba(63,191,191,0.5)., светлячок
    • hsla(180,50%,50%,0.5)., интернет-исследователь

 

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

    • rgba(0,0,0,0)., хром
    • transparent., firefox совместим, но это преобразование все еще кажется странным.
    • hsla(180,50%,50%,0)., интернет-исследователь

Ничего себе, я с трудом могу поверить, что просто потратил 2 часа на тестирование этой функции в разных браузерах!

Думаю, я могу использовать демо, используя функцию, пока я нахожусь...

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

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

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

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

function isColorBlack(c) {
	var s = getColorCSS(c);
	return [
		"black",
		"rgb(0,0,0)",
		"rgba(0,0,0,1)",
		"hsl(0,0%,0%)",
		"hsla(0,0%,0%,1)"
	].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>

Ответ 5

Я думаю, вы можете использовать script из этой страницы, которая делает именно то, что вы хотите: вы передаете ей строку и пытаетесь выяснить цвет. Хорошо, это не совсем то, что вы хотели сделать, но это должно сработать.

Я думаю, что в любом случае в какой-то момент вам нужно будет искать имя (я не думаю, что есть какой-то волшебный способ определить шестнадцатеричное значение из строки "светло-голубой" ), так что просто вырвите работу какой-то другой (script принадлежит Стояну Стефанову, который очень хорош в javascript, я прочитал от него хорошие книги, и если он сделает поиск, ну, я не думаю, что есть другое решение)