Javascript Girl
  1. Javascript Girl
  3. Validation des noms de couleurs CSS
Intereting Posts
Variable d'incrémentation du serveur NodeJS par deux pour chaque demande Comment trier un tableau en lieu et place d'un tableau d'indices cibles? Comment déplacer un élément dans un autre élément? Obtenir la somme d'une collection (tous les modèles) avec backbone.js Directive AngularJS, enveloppe le contenu et conserve les attributs sur l'élément d'origine En utilisant JavaScript insertBefore () pour insérer avant un TextNode? Pourquoi est-ce "ceci" dans une fonction anonyme indéfinie lors de l'utilisation stricte? Trouvez-vous ce que javascript modifie le DOM? Comment convertir une chaîne png base64 en tableau de pixels sans utiliser le lien getImageData? Comment puis-je utiliser un bouton radio pour envoyer un utilisateur à un nouveau site en JavaScript? Les horodatages des événements JavaScript ne sont pas cohérents Taille maximale / longueur d'expression régulière dans les navigateurs Web "modernes"? Tout remplacement de l'alerte JQuery () pour la version native de JavaScript? Qu'est-ce qui ne va pas avec crypto.getRandomValues ​​dans Internet Explorer 11? Comment détecter un audio a-t-il fini de jouer sur une page Web?

Validation des noms de couleurs CSS

J'ai écrit un plugin jQuery qui accepte les couleurs css pour certains de ses paramètres.

Je veux les valider. S'il s'agissait simplement d'une valeur hexadécimale ou rgb, je pourrais le faire avec une expression régulière, mais comment valider les 147 noms de couleurs valides sans gonfler le plugin?

Je me demandais s'il y avait une façon d'essayer d'appliquer un style (peut-être avec jquery) et d'attraper une erreur du navigateur s'il n'est pas valide?

Edit: powtac et Pantelis ont trouvé une solution, mais ils ont tous deux manqué les cas de bord, alors je comprend une solution complète ici: 

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

Toutes les solutions publiées sur cette page sont incorrectes lorsque la chaîne en question est de la même couleur que la couleur de test. Certes, vous pourriez utiliser un choix de couleur très improbable, mais je préférerais avoir un taux de réussite de 100%.

OP a une seule faute de frappe dans son code (voir condition avec deux points) et ne teste pas "# 28e32a", de sorte que la couleur échoue, et le regex va effondrer les espaces dans la couleur, alors "# 28e 32a" (incorrectement ) passer.

Dans JavaScript normal, cela devrait avoir 100% de succès: 

 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/

Vous pouvez simplement définir la couleur dans un élément fictif, puis vérifier si la valeur de l'élément est autre chose que le blanc. 

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

Je sais que cette question est assez ancienne, mais j'ai trouvé une solution javascript pure pour vérifier les couleurs qui semble fonctionner dans tous les navigateurs et voulait la partager

Cette fonction utilise le navigateur pour convertir n'importe quelle chaîne d'entrée en chaîne de couleur CSS (si possible) 

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

Voyons la sortie de la fonction en fonction de différentes entrées …

ENTRÉES INVALIDES

Fondamentalement chaque fois que le navigateur ne peut pas comprendre comment rendre la chaîne d'entrée comme une couleur, une empty string est renvoyée, ce qui rend cette fonction minuscule parfaite pour détecter les chaînes de couleurs non valides!

  • 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

ENTRÉES VALIDES

  • aqua

    • aqua . . . chrome
    • aqua . . . Firefox
    • aqua . . . Internet Explorer

  • pink

    • rgb(255,192,203) . . . Chrome convertit tous les noms de couleurs html valides en format rgb sauf pour les 17 suivants et je ne suis pas vraiment sûr de pourquoi ["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) . . . Chrome convertit rgba en rgb n'importe quand alpha est rgba ou supérieur à 1.0 car il est totalement opaque de toute façon (probablement pour la performance)
    • rgb(255,0,0) . . . Firefox fait la même chose que chrome
    • rgba(255,0,0,1) . . . Internet Explorer convertit l'alpha param de 1.0 ou plus en 1

  • rgba(0,255,0,0.5)

    • rgba(0,255,0,0.498039) . . . Chrome renvoie quelque chose de différent de celui des autres navigateurs (éventuellement une précision commerciale pour la performance)
    • 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 convertit l'alpha param de 0.0 ou inférieur à 0
    • rgba(0,0,255,0) . . . Firefox fait de même
    • rgba(0,0,255,0) . . . Internet Explorer fait la même chose

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

    • rgba(0,0,0,0) . . . chrome
    • transparent . . . Firefox convertit uniquement cette instance rgba avec tous les paramètres définis sur 0 sur le mot transparent (étrange)
    • rgba(0,0,0,0) . . . Internet Explorer

  • hsl(180,50%,50%)

    • rgb(63,191,191) . . . chrome
    • rgb(63,191,191) . . . Firefox
    • C'est-à-dire 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 convertit toute représentation hsl du black en cela

  • hsl(x,x,100%)

    • rgb(255,255,255) . . . chrome
    • rgb(255,255,255) . . . Firefox
    • hsl(0,0%,100%) . . . Internet Explorer convertit toute représentation hsl de white à cette

  • 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 est cohérent, mais cette conversion semble encore étrange
    • hsla(180,50%,50%,0) . . . Internet Explorer

Wow, je peux difficilement croire que je viens de passer 2 heures à tester cette fonction dans différents navigateurs!

Je suppose que je peux aussi démo utiliser la fonction pendant que je suis là … 

 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>

Ici, http://jsfiddle.net/vSXNK/

Il est écrit à la hâte mais ça marche.

Je pense que vous pouvez utiliser le script de cette page qui fait exactement ce que vous voulez: vous passez une chaîne et essaie de trouver la couleur. D'accord, ce n'est pas exactement ce que vous vouliez faire, mais cela devrait fonctionner.

Je pense que, en tout cas, à un moment donné, vous devriez faire une recherche de nom (je ne pense pas qu'il existe un moyen magique de déterminer la valeur hexadécimale à partir de la chaîne "bleu clair"), alors arrachez le travail que quelqu'un d'autre a fait ( Le script est par Stoyan Stefanov qui est très bon à javascript, j'ai lu quelques bons livres de lui, et s'il fait une recherche, eh bien, je ne pense pas qu'il y ait une autre solution)