Estoy haciendo una tienda e hice una parte de "Colores disponibles", pero quiero poder colorear palabras separadas con diferentes colores, en Javascript, css o HTML, o como sea posible
<button onclick="getColors()">Colors Available</button> <script> function getColors(){ if(!document.getElementById('colors_ava')){ let colors_ava = document.createElement('div'); colors_ava.id = 'colors_ava'; document.body.appendChild(colors_ava); colors_ava.innerText = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue"; } } </script>Puede tener un método útil para crear un espacio con estilo.
function getColors() { function createSpan(str, color) { const span = document.createElement("span"); span.style.color = color; span.style.marginRight = "20px"; span.textContent = str; return span; } if (!document.getElementById("colors_ava")) { let colors_ava = document.createElement("div"); colors_ava.id = "colors_ava"; document.body.appendChild(colors_ava); colors_ava.append(createSpan("Red color - ", "red")); colors_ava.append(createSpan("Blue color - ", "blue")); // colors_ava.innerText = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue"; } } <button onclick="getColors()">Colors Available</button>Puede sostener la cadena original y luego dividirla en los guiones para extraer los colores. Luego coloque cada color en su propio elemento de tramo y estilícelo con el color apropiado.
Tenga en cuenta que algunos de los colores coinciden con los colores CSS, mientras que otros no, por lo que este fragmento usa variables CSS para definirlos y el código establece el valor de la variable para cada entrada.
Dado que los guiones (y el espacio que los rodea) son pistas visuales en lugar de caracteres integrales en la lista de colores, este fragmento los reemplaza con pseudo contenido y relleno del elemento posterior. Es posible que desee modificar esto dependiendo exactamente del resultado final que se requiera.
function getColors() { if (!document.getElementById('colors_ava')) { let colors_ava = document.createElement('div'); colors_ava.id = 'colors_ava'; document.body.appendChild(colors_ava); let str = "Rich Navy - True Red - Dark Geen - Olive Drab Green - Patriot Blue"; let str2 = str.replace(/\s/g, ''); //get rid of all the spaces let arr = str2.split('-'); //each color goes into an item of an array let arr2 = str.split('-'); //as above but with spaces still there in the colors for (let i = 0; i < arr.length; i++) { const span = document.createElement('span'); span.style.color = 'var(--' + arr[i] + ')'; span.innerText = arr2[i]; colors_ava.appendChild(span); } } } :root { --RichNavy: #535E8D; --TrueRed: red; --DarkGreen: darkgreen; --OliveDrabGreen: olivedrab; --PatriotBlue: #343A57; } span::after { content: '-'; padding: 0 1em; color: black; } span:last-child::after { content: ''; padding: 0; } <button onclick="getColors()">Colors Available</button>