Javascript modifie la couleur du texte et de l'arrière-plan à la valeur d'entrée
Je vais utiliser javascript pour créer une fonction pour modifier la couleur d'arrière-plan, ainsi que le texte simultanément – en fonction de la valeur d'une entrée de texte. J'ai la couleur d'arrière-plan à changer, mais je ne parviens pas à faire fonctionner le texte.
function changeBackground() { // The working function for changing background color. document.bgColor = document.getElementById("color").value; // The code I'd like to use for changing the text simultaneously - however it does not work. document.getElementById("coltext").style.color = document.getElementById("color").value; } En regardant le code ci-dessus, le code pour le document.getElementById("coltext").style.color = x fonctionne lorsque document.getElementById("coltext").style.color = x une couleur réelle, et non la valeur "couleur".
C'est le html dont je fais allusion (je sais que c'est horriblement optimisé, mais c'est un travail en cours):
<form id="TheForm" style="margin-left:396px;"> <input id="color" type="text" onchange="changeBackground();" /> <br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" /> </form> <span id="coltext">This text should have the same color as you put in the text box</span>
De toute évidence, et malheureusement, je ne peux pas utiliser le code de cette façon. Mais peu importe que je tente, au-delà de cela, j'arrive à une sorte de complexité infinie. Ce devrait être une sorte de moyen facile de résoudre ce problème, n'est-ce pas?
Les choses semblent un peu confuses dans le code dans votre question, alors je vais vous donner un exemple de ce que je pense que vous essayez de faire.
Les premières considérations concernent le mélange HTML, Javascript et CSS:
Pourquoi utilise onClick () en HTML une mauvaise pratique?
Javascript discret
Styles en ligne vs classes
Je supprimerai le contenu en ligne et les diviserons dans leurs fichiers appropriés.
Ensuite, je vais aller avec l'événement «clic» et décrocher l'événement «changement», car il n'est pas clair que vous voulez ou avez besoin des deux.
Votre changeBackground fonction L' changeBackground définit à la fois la couleur changeBackground et la couleur du texte à la même valeur (votre texte ne sera pas vu), donc je met en cache la valeur de couleur car nous n'avons pas besoin de la rechercher dans le DOM deux fois.
CSS
#TheForm { margin-left: 396px; } #submitColor { margin-left: 48px; margin-top: 5px; }
HTML
<form id="TheForm"> <input id="color" type="text" /> <br/> <input id="submitColor" value="Submit" type="button" /> </form> <span id="coltext">This text should have the same color as you put in the text box</span>
Javascript
function changeBackground() { var color = document.getElementById("color").value; // cached // The working function for changing background color. document.bgColor = color; // The code I'd like to use for changing the text simultaneously - however it does not work. document.getElementById("coltext").style.color = color; } document.getElementById("submitColor").addEventListener("click", changeBackground, false);
Sur jsfiddle
Source: w3schools
Valeurs de couleur
Les couleurs CSS sont définies en utilisant une notation hexadécimale (hexagonal) pour la combinaison des valeurs de couleur Rouge, Vert et Bleu (RVB). La valeur la plus basse pouvant être donnée à l'une des sources lumineuses est 0 (hex 00). La valeur la plus élevée est 255 (hex FF).
Les valeurs Hex sont écrites en 3 chiffres à double chiffre, en commençant par un signe #.
Mise à jour : comme l'a souligné @Ian
Hex peut avoir soit 3 ou 6 caractères
Source: W3C
Valeurs de couleur numériques
Le format d'une valeur RVB en notation hexadécimale est un '#' immédiatement suivi de trois ou six caractères hexadécimaux. La notation RVB à trois chiffres (#rgb) est convertie en formulaire à six chiffres (#rrggbb) en répliquant les chiffres, et non en ajoutant des zéros. Par exemple, # fb0 se développe sur # ffbb00. Cela garantit que le blanc (#ffffff) peut être spécifié avec la notation courte (#fff) et supprime toutes les dépendances de la profondeur de couleur de l'affichage.
Voici une fonction alternative qui vérifiera que votre entrée est une couleur Hex CSS valide, elle définira la couleur du texte uniquement ou lancera une alerte si elle n'est pas valide.
Pour le test regex, j'utiliserai ce modèle
/^#(?:[0-9a-f]{3}){1,2}$/i
Mais si vous étiez compatible avec regex et que vous souhaitez diviser les nombres en groupes, vous auriez besoin d'un modèle différent
function changeBackground() { var color = document.getElementById("color").value.trim(), rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i; if (rxValidHex.test(color)) { document.getElementById("coltext").style.color = color; } else { alert("Invalid CSS Hex Color"); } } document.getElementById("submitColor").addEventListener("click", changeBackground, false);
Sur jsfiddle
Voici une autre modification qui permettra aux couleurs par nom avec hex.
function changeBackground() { var names = ["AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"], color = document.getElementById("color").value.trim(), rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i, formattedName = color.charAt(0).toUpperCase() + color.slice(1).toLowerCase(); if (names.indexOf(formattedName) !== -1 || rxValidHex.test(color)) { document.getElementById("coltext").style.color = color; } else { alert("Invalid CSS Color"); } } document.getElementById("submitColor").addEventListener("click", changeBackground, false);
Sur jsfiddle
Selon l'événement que vous souhaitez utiliser ( change zone de texte ou click bouton), vous pouvez essayer ceci:
HTML:
<input id="color" type="text" onchange="changeBackground(this);" /> <br /> <span id="coltext">This text should have the same color as you put in the text box</span>
JS:
function changeBackground(obj) { document.getElementById("coltext").style.color = obj.value; }
DEMO: http://jsfiddle.net/6pLUh/
Un problème mineur avec le bouton était qu'il s'agissait d'un bouton de soumission, sous une forme. Lorsque vous cliquez dessus, cela soumet le formulaire (qui finit simplement de recharger la page) et les modifications apportées par JavaScript sont réinitialisées. L'utilisation de l' onchange vous permet de modifier la couleur en fonction de l'entrée.
document.getElementById("fname").style.borderTopColor = 'red'; document.getElementById("fname").style.borderBottomColor = 'red';