Question

我想为不同的文字添加不同的颜色。我想要添加的颜色列表存储在一个数组中。我如何使用该数组为我的文本指定颜色？请检查我写的代码。文字＆＃34; hai＆＃34;应该是青色的。但输出并不像预期的那样。

＆＃13;

<!doctype html>
<html>
<body>
  <script>
    var colors=['blue','cyan','gold','grey','green'];
  </script>
  <h1 style="color:colors[1]">hai</h1>
</body>
</html>

＆＃13;

Answer 1

您应首先为所需元素提供 id ，然后通过js检索它并设置样式：

＆＃13;

<!doctype html>
<html>
  <body>
    <script>
      window.onload = function() {
        var colors = ['blue', 'cyan', 'gold', 'grey', 'green'],
            h      = document.getElementById('heading1');
        h.style.color = colors[1];
      };     
    </script>
    <h1 id="heading1">hai</h1>
  </body>
</html>

＆＃13;

Answer 2

dNitro的解决方案有效。我很困惑为什么你需要在数组中存储颜色。如果要为不同的文本提供不同的颜色。常见的解决方案是在css中设计不同的颜色样式并在元素中使用它。如下面的代码

  <!doctype html>
    <html>
    <style media="screen">
      .cyan
      {
        color: cyan;
      }
      .blue
      {
        color: blue;
      }
    </style>
    <body>    
      <h1 class="cyan">Hello, </h1>
      <h1 class="blue">World</h1>
    </body>
    </html>

从颜色数组中向文本添加颜色

2 个答案: