如何为引号中的单独单词着色

Question

我正在开一家商店，我做了一个“可用颜色”部分，但我希望能够用不同的颜色为单独的单词着色，在 Javascript、css 或 HTML，或者有可能

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

Answer 1

您可以使用 util 方法创建带有样式的跨度。

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>

Answer 2

您可以保留原始字符串，然后将其拆分为破折号以提取颜色。然后将每种颜色放入其自己的 span 元素中，并使用适当的颜色设置样式。

请注意，有些颜色与 CSS 颜色匹配，而有些则不匹配，因此此代码段使用 CSS 变量来定义它们，代码为每个条目设置变量值。

由于破折号（及其周围的 space）是视觉线索而不是颜色列表中的完整字符，因此此代码段在元素内容和填充之后用伪元素替换了它们。您可能希望根据所需的最终结果来更改此选项。

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>

如何为引号中的单独单词着色

How do I color separate words that are in quotation marks

javascript

html

css

colors

shop