<p>使用javascript更改标记文本颜色失败

<p> tag text color changed failed using javascript

本文关键字：颜色 失败 文本 javascript lt gt 使用      更新时间：2023-09-26

我不明白为什么我不能更改文本"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>

你在依赖一些我建议不要依赖的东西：

  1. message是全局的，因为您已经将其作为id值给出。相反，使用document.getElementById查找元素。

  2. 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');
  }
})();

实例

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

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

更新：在下面回复您的评论：

如何更改changeColor函数，使其接受changeColor（this.innerText）；'？或者更改颜色（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;
  }
})();

实例

由于函数只会更改message元素的颜色，因此实际上最好稍微重命名这些函数，但您已经明白了。

离题：如果你利用那些创建了jQuery、Prototype、YUI、Closure或其他任何库的人所做的艰苦工作，很多这些事情都会变得容易得多。这些库有助于消除浏览器之间的差异，并提供许多实用功能。例如，我连接上面的事件处理程序（分配给onclick属性）的方式，就像您的onclick属性一样，是非常过时的，但由于旧的Microsoft浏览器，最新的方式会有所不同，因此会使示例变得相当复杂。图书馆为你处理这类事情。

以下是使用jQuery的相同JavaScript代码：

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

实例

尽管如果你喜欢的话，你可以把它做得更紧凑：

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

实例

这是因为message是一个未定义的变量。你需要做的是： 
function changeColor(c) {
    document.getElementById('message').style.color = c;
}

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

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

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

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

所以，像这样：

<script type="javascript">
function changeColor(c)
{
     document.getElementById("message").style.color=c;
}
</script>

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

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

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

  1. 在您的script tag中，您有language=，应该是type=
  2. 您应该使用document.getElementById("message")而不是message

  3. 您应该为函数提供一个实际的颜色。string text "Blue"不是彩色

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

一种选择是进行

<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>
相关文章：