CODEWITHSUNDEEP
javascripthtml
Radhika Shukla
Radhika Shukla

Reputation: 115

Find and change the color of text in Label

I am trying to change the label color to RED when (Not Recommended) is a part of Label. Is there any way to find the text from Label and change the color of it. I don't want to use a class for all and to change them. 

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

Thank you for your time.

Upvotes: 1

Views: 2380

Answers (3)

Ullas
Ullas

Reputation: 11566

Try this:

Find fiddle Here

JS (Uses jQuery)

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

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

The simplest way, that will work on any browser and won't rely on any library is to loop through all the labels on the page, look for the text in them, and paint them 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';
    }
}

Example

Although using a class is the correct course of action. These labels have something in common, they are all not recommended. In fact a better course of action can be seen in this example, where the Not Recommended is added on its own with CSS.

Upvotes: 0

V31
V31

Reputation: 7666

You can make use of the function:

window.find(text)

where your text will be '(Not Recommended)' in your case

As per browser support this function works on chrome, firefox and safari.

For IE you need to use the findText method of the TextRange object for similar functionality

Upvotes: 0

Related Questions