Javascript changing background color

Question

I tried to change a background color with javascript and it didn't work out, and after lots of trying I didn't find any problem.

var x=1;

switch(x) {
    case 1: {
        document.getElementsByClassName("gallery").style.backgroundColor="blue";
    }
}

I don't see any need to copy html or css to here. If this code is fine though I'll edit and add the other codes.

Edit: Html added, as you requested.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>פרדס מרים ומרדכי</title>
<link href="../../CSS.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="Album1.js" type="text/javascript"></script>
</head>

<body>
    <div id="wrapper">
      <div id="header"></div>
      <div id="menu">
        <pre class="menu1"><a class="menu1" href="../../index.html">דף הבית</a>             <a class="menu1" href="../../HowToArrive.html">כיצד מגיעים</a>             <a class="menu1" href="../../HowItAllBegan.html">איך הכל התחיל</a>             <a class="menu1" href="../../Albums.html">אלבומי תמונות</a>             <a class="menu1" href="../../Contact.html">צור קשר</a></pre>
        </div>
      <div id="main">
        <div class="gallery_bg">    
            <div class="gallery"></div>
        </div>
      </div>
    </div>
</body>
</html>

Edit: CSS added. I believe you only need the part referring to the gallery class. The whole code is really long, if you need it I'll add it too, just say.

        .gallery {
            width:550px;
            height:550px;
            -webkit-background-size: 550px 550px;
            -moz-background-size: 550px 550px;
            background-size: 550px 550px;
            border:#fff 3px solid;
            margin:0 auto;
        }

Don't you have to iterate through the set and apply the new style to each element one-by-one? The getElementsByClassName function returns an array. — abiessu
– abiessu, Commented Aug 27, 2013 at 13:09

Ivan Chernykh · Accepted Answer · 2013-08-27 13:09:21Z

6

Try this:

document.getElementsByClassName("gallery") returns NodeList , and it is like Array , so you can do:

document.getElementsByClassName("gallery")[0].style.backgroundColor="blue";

Or do it in loop:

var galleries = document.getElementsByClassName("gallery");
var len =  galleries.length;

for(var i=0 ; i<len; i++){
   galleries[i].style.backgroundColor="blue";
}

answered Aug 27, 2013 at 13:09

Ivan Chernykh

42.2k13 gold badges136 silver badges149 bronze badges

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

6 Comments

OriShuss Over a year ago

It doesn't seem to do anything. I changed my code to your first one (with the [0]) but there is still no result. There is only 1 element in this class for now, so i suppose 0 is the right number.. Furthermore, I tried to change it to Id and it still didn't work.

Greg Hornby Over a year ago

Can you show us the html and css OriShuss, if this doesn't work, it's likely a problem with one of those

OriShuss Over a year ago

I'll edit and add the HTML. But this is the weirdest problem ever- I have checked all my codes on fiddle (html, css and javascript) and on fiddle the division really WAS blue. If you check my website though, pardesmm.com/galleries/… you can notice that the division (in the middle) is grey, in the page color. So the code affects fiddle but doesn't affect the internet? (I added a border to the website so you can see what division I refer to).

Harry Over a year ago

@OriShuss: mate, it looks like the JS is getting executed before the element is created. Try moving the script tag to just before the end of the body tag (</body>) or put the entire thing into a function and call it on page load. You can refer to my updated answer for details on how to do it on load.

OriShuss Over a year ago

Thanks alot! So, do all <script> tags have to come at the end unless they specify a function?

|

Salman Mazhar · Accepted Answer · 2022-09-07 19:35:31Z

0

"document.getElementsByClassName" work like an array if you want to change the backgrouond color you have to use loop to change the color.

Solution: const ulList = document.getElementsByClassName("list-item");

    for(var i = 0; i < liList.length; i++){
    ulList[i].style.backgroundColor = 'red';
    }

edited Sep 7, 2022 at 19:35

answered Sep 7, 2022 at 19:33

Salman Mazhar

11 bronze badge

Collectives™ on Stack Overflow

Javascript changing background color

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related