Question

我不明白为什么我无法更改文字'Welcome'的颜色。以下是两种方法，任何帮助将不胜感激。

<html> 
    <head>
        <script language="text/javascript">
            function changeColor(c) {
                message.style.color=c;
            }
        </script>
     </head>
     <body>
         <p id="message" style="color:orange"> Welcome </p>
         <ul id="color">
             <li onclick='changeColor(this.innerText);'>Blue</li>
             <li onclick='changeColor(this.style.color);'>Red</li>
          </ul>
     </body>
</html>

Answer 1

你依赖于我建议不依赖的一些事情：

message是全球性的，因为您已将其作为id值。相反，请使用document.getElementById查找元素。
innerText主要是微软的事情。使用您显示的示例，您可以使用innerHTML，这是可靠的跨浏览器，但我建议将颜色存储在data-属性中，以便您的标签可以是您想要的任何内容（包括与CSS颜色名称不同的语言）。

以下是我可能在不引入任何库并保持相当简单的情况下接近它的方法：

标记：

<p id="message" style="color:orange"> Welcome </p>
<ul id="color">
<li data-color="blue">Blue</li>
<li data-color="red">Red</li>
</ul>

JavaScript的：

(function() {
  var ul = document.getElementById('color'),
      list = ul.getElementsByTagName('li'),
      message = document.getElementById('message'),
      index;
  for (index = 0; index < list.length; ++index) {
    list[index].onclick = changeColor;
  }

  function changeColor() {
    message.style.color = this.getAttribute('data-color');
  }
})();

Live example

包含JavaScript的script标记必须在标记之后才能正常工作。

完全依赖于标准，并且应该符合所有主流浏览器。 data-属性在HTML4中无效（如果验证是您工作流程的一部分），但它们适用于所有主要（可能是所有次要）浏览器。它们从HTML5开始有效（允许任何元素上带有前缀data-的任何属性，正是出于此目的）。

更新：重新评论以下内容：

如何更改changeColor函数，以便它接受changeColor（this.innerText）;'？或者changeColor（this.style.color）; ??

如果您希望将功能分开（完全合理），您可以这样做：

(function() { var ul = document.getElementById('color'), list = ul.getElementsByTagName('li'), message = document.getElementById('message'), index; for (index = 0; index < list.length; ++index) { list[index].onclick = changeColorViaDataAttr; } function changeColorViaDataAttr() { changeColor(this.getAttribute('data-color')); } function changeColor(color) { message.style.color = color; } })();

Live example

由于函数只改变message元素的颜色，实际上最好稍微重命名这些函数，但是你明白了。

偏离主题：如果您利用创建jQuery，Prototype等库的人所做的辛勤工作，很多这样的事情会变得容易多了，YUI，Closure或any of several others。这些库有助于平滑浏览器差异并提供大量实用功能。例如，我连接上面的事件处理程序（分配到onclick属性）的方式，如onclick属性，非常老式，但是由于较旧的Microsoft浏览器，更新的方式有所不同，因此会使示例复杂化。图书馆为你顺利完成了这件事。

这是使用jQuery的相同JavaScript代码：

(function() { $("#color li").click(changeColor); function changeColor() { $("#message").css("color", this.getAttribute("data-color")); } })();

Live example

如果您愿意，可以使它更紧凑：

(function() { $("#color li").click(function() { $("#message").css("color", $(this).data("color")); }); })();

Live example

Answer 2

嗯，那是因为message是一个未定义的变量。你需要做的是：

function changeColor(c) {
    document.getElementById('message').style.color = c;
}

Answer 3

<li onclick='changeColor(this.innerText);'>Blue</li>不起作用，因为函数changeColor期望颜色作为参数，而不是文本。

<li onclick='changeColor(this.style.color);'>Red</li>不起作用，因为message正文中的变量changeColor未定义。

如果您查看了浏览器的错误控制台，至少会发现第二个错误。

Answer 4

如果你想使用它的ID获取元素，你需要这样做：document.getElementById（“message”）

所以，就像这样：

<script type="javascript">

function changeColor(c)
{
     document.getElementById("message").style.color=c;
}

</script>

Answer 5

changeColor功能的参数应该是您要显示的颜色。在函数中，您需要实际获取对要操作的DOM对象的引用，使用：

document.getElementById("message").style.color = c;

在您的示例中，message是一个未定义的全局变量，因此将其替换为对所需DOM元素的引用，它应该可以正常工作。

Answer 6

在您的script tag language= type=
您应该使用document.getElementById("message")代替message。

您应该使用实际颜色提供功能。 string text "Blue"不是颜色

function changeColor(c)
{
   document.getElementById("message").style.color = c;
}

Answer 7

一个选项可能是

<li style="color:Red" onclick='changeColor(this.style.color);'>Red</li>

而不是

<li onclick='changeColor(this.style.color);'>Red</li>



<html> 
        <head>
            <script language="text/javascript">
                function changeColor(c) {
                    message.style.color=c;
                }
            </script>
         </head>
         <body>
             <p id="message" style="color:orange"> Welcome </p>
             <ul id="color">
              <li style="color:Red" onclick='changeColor(this.style.color);'>Red</li>
               <li style="color:Blue" onclick='changeColor(this.style.color);'>Blue</li>
              </ul>
         </body>
    </html>

<p>标记文字颜色更改失败，使用javascript </p>

7 个答案: