在标签中找到并更改文本的颜色

Find and change the color of text in Label

本文关键字：文本 颜色 标签      更新时间：2023-09-26

我试图改变标签颜色为红色时(不推荐)是标签的一部分。有没有办法从标签中找到文本并改变它的颜色?我不想为所有人使用一个类，然后改变它们。

<html>
 <head> 
  <title> Label Color Change </title>
 </head>
 <body>
    <table>
      <tr>
        <td>
          <label for="imgDisplay">Do you want to Display Image:<br>(Not Recommended)</label>
        </td>
        <td>
          <input id="imgUrl" name="imgUrl" type="checkbox" checked=False>
        </td>
      </tr>
      <tr>
        <td>
          <label for="linkInsert"> Add a Link on the top :</label>
        </td>
        <td>
          <input for="chckLink" name="chckLink" type="checkbox">
        </td>
      </tr>
      <tr>
        <td>
          <label for="userDetails"> Wish to take User Details :</label>
        </td>
        <td>
          <input for="userDetail" name="userDetail" type="checkbox">
        </td>
      </tr>
    </table>
  </body>
</html>

谢谢你的时间。

试试这个:

Find fiddle Here

JS(使用jQuery) 
$(document).ready(function () {
   $("label:contains(Not Recommended)").css("color", "red");
});

最简单的方法是遍历页面上的所有标签，查找其中的文本，并将其涂成红色，这将适用于任何浏览器，而不依赖于任何库。

var labels = document.getElementsByTagName('label');
for (i = 0; i < labels.length; i++) {
    if (labels[i].innerHTML.indexOf('Not Recommended') !== -1) {
        labels[i].style.color = 'red';
    }
}

尽管使用类是正确的操作过程。这些标签有一些共同点，它们都是不推荐的。实际上，在这个示例中可以看到一个更好的操作过程，其中Not Recommended是单独与CSS一起添加的。

您可以使用以下函数:

window.find(text)

在你的情况下，你的文本将是'(不推荐)'

根据浏览器的支持，此功能适用于chrome, firefox和safari。

对于IE，您需要使用TextRange对象的findText方法来实现类似的功能

相关文章：