Change Text BackGround Color in HTML using JavaScript - Stack Overflow

admin管理员组

文章数量:1279121

<ul>
    <li>
        <span class="name">Tortilla de blé</span>
    </li>
</ul>

This is the original source. I need to change the background Color of just the text in the tag. I have used css property background-color for it. But it is changing the color of the whole list item. i have to change the background color only by using javascript.

var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i++)
    ea[i].style.backgroundColor = "yellow";

(Changed the Older Script as that was not correct, mistakenly written)

My Result:

Expected Result: What could i do to just highlight the text in the tag and not the whole tag.

I have produced the expected result by editing the source code like below:

<ul>
    <li>
        <span class="name"><font style="bakground-color:yellow">Tortilla de blé</font></span>
    </li>
</ul>

By Embedding font tag to the text which is not possible with the javascript. I have done this with the help of Inspect Element feature of Google Chrome

<ul>
    <li>
        <span class="name">Tortilla de blé</span>
    </li>
</ul>

This is the original source. I need to change the background Color of just the text in the tag. I have used css property background-color for it. But it is changing the color of the whole list item. i have to change the background color only by using javascript.

var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i++)
    ea[i].style.backgroundColor = "yellow";

(Changed the Older Script as that was not correct, mistakenly written)

My Result:

Expected Result: What could i do to just highlight the text in the tag and not the whole tag.

I have produced the expected result by editing the source code like below:

<ul>
    <li>
        <span class="name"><font style="bakground-color:yellow">Tortilla de blé</font></span>
    </li>
</ul>

By Embedding font tag to the text which is not possible with the javascript. I have done this with the help of Inspect Element feature of Google Chrome

• javascript
• html

Share Improve this question Follow edited Oct 5, 2011 at 10:24 Saurabh Saxena asked Oct 5, 2011 at 10:05 Saurabh SaxenaSaurabh Saxena 3,2151111 gold badges3535 silver badges4646 bronze badges 1

• A point of clarification: in the 'expected result' picture, is the JS being applied only to the first list element? – grw Commented Oct 5, 2011 at 10:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Your js example is not valid and should not do anything ...

You need to set the style on each span element;

var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i++)
        ea[i].style.backgroundColor = "yellow";

Tried with jQuery, http://jsfiddle/sameerast/gT9eh/

As explained above - your JS is not valid. For starters, the function name is 'getElementsByClassName' rather than 'getElementByClaassName'.

You then need to have it loop through the elements and set their properties individually. JQuery will give you a nice shortcut as outlined by Sameera.

sample from Alex K. :

because there was an error I had to add 2 brackets :

var ea = document.getElementsByClassName('name');
for(var i = 0; i < ea.length; i++)
        {ea[i].style.backgroundColor = "yellow";}

本文标签： Change Text BackGround Color in HTML using JavaScriptStack Overflow