Change Text BackGround Color in HTML using JavaScript

Question

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

Original Image

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

Expected Image

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

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

Alex K. · Accepted Answer · 2011-10-05 10:14:17Z

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

answered Oct 5, 2011 at 10:14

Alex K.

177k32 gold badges276 silver badges299 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Saurabh Saxena Over a year ago

fine, but i need to highlight just the text not the whole tag ... is this possible?

Alex K. Over a year ago

It will; jsfiddle.net/pe4bn unless the span is inheriting a style that overrides its default behaviour, e.g. display:block

Saurabh Saxena Over a year ago

club-sandwich.net/recettes/tuna-wrap-256.php Check this Page. I have created my example form this page.

Saurabh Saxena Over a year ago

I am trying to highlight some text on a web page which is from a different domain.

grw Over a year ago

Setting 'background: yellow;' on the <span class="name"> elements in the Chrome inspector works fine on your club-sandwich.net page - so it should be settable in JavaScript as well.

user369661 · Accepted Answer · 2011-10-05 10:15:32Z

2

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

answered Oct 5, 2011 at 10:15

user369661

1 Comment

Saurabh Saxena Over a year ago

club-sandwich.net/recettes/tuna-wrap-256.php Check this Page. I have created my example form this page

grw · Accepted Answer · 2011-10-05 10:22:14Z

1

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.

answered Oct 5, 2011 at 10:22

grw

1,3991 gold badge13 silver badges19 bronze badges

Comments

Werner925 · Accepted Answer · 2021-08-18 04:23:14Z

1

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";}

answered Aug 18, 2021 at 4:23

Werner925

395 bronze badges

Collectives™ on Stack Overflow

Change Text BackGround Color in HTML using JavaScript

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related