CODEWITHSUNDEEP
javascripthtmljquery
pauldx
pauldx

Reputation: 1004

Javascript to change table tab font color

I have below Table section appears into my dashboard and I want to change color for the tab names as "TEST" : NOTE : Below HTML is predefined and generate by tool so this can't be modified

<table class="masterH3 masterTabBarTabSecondarySelected secondaryTabSelected tabContainerSelected" id="dashboard_page_6_tab" cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td title="TEST">
        <div tabindex="0">TEST</div>
      </td>
    </tr>
  </tbody>
</table>

I want to change FONT color of TEST to any color I want and I have used below definition in Javascript to change color and override it

This JS works for Chrome and Edge but broken for Firefox for some reason. Any help to use alternative code to fix this ? thanks

var span1 = document.querySelector('#dashboard_page_6_tab span');
span1.innerHTML = '<font color="#F38A00"> TEST </font>';

Upvotes: 0

Views: 115

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

The situation with the span tag remained unclear.

I took a different approach to creating the font tag, method createElement(). And then I assign the text, and the color style.

Check it out.

var div_tag = document.querySelector('#dashboard_page_6_tab tr td div');
var div_tag_text = div_tag.innerText.trim();
var span_tag = document.createElement('span');

span_tag.style.color = '#F38A00';
span_tag.append(div_tag_text);
div_tag.innerHTML = '';
div_tag.append(span_tag);
<table class="masterH3 masterTabBarTabSecondarySelected secondaryTabSelected tabContainerSelected" id="dashboard_page_6_tab" cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td title="TEST">
        <div tabindex="0">TEST</div>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions