Using JavaScript to change a CSS rule

JavaScript
1

Hi all,

I’m new to JavaScript, so apologies if my question seems elementary. I’m trying to write a JS function that generates and sets a random y-coordinate for a background image that I set in a CSS stylesheet.

This is my HTML (I’m just quoting the relevant parts):

<body>
    <div id="container_main">
        <....sibling element...>
        <div id="side_bar">
             <a href="url of another page in site">
                  <span class="side_bar_box"></span>
             </a>
        </div>
        <...sibling element...>
    </div>
</body>

This is the relevant CSS rule:

span.side_bar_box {
	position:absolute;
	top:0;
	left:0;
	width:146px;
	height:2250px;
	background:url("my_image.jpg") 0 0 no-repeat;
}

The background image which I set for the empty <span> element is 7050px high, i.e it is much bigger than the box I created for it. So, I want to randomise the y-coordinate (between 0 and 4800px and in increments of 150px) with JS so that a different part of the image is visible with each page load.

I’ve managed to write the random coordinate generator:

function sbRandomiser(){
	var imgOffset = Math.round(Math.random()*32)*150;
	alert(imgOffset);
}

window.onload = sbRandomiser;

So far so good. The “alert” message confirms that the code works to generate a random number in multiples of 150 and smaller than 4800 which I can use to offset the y-coordinate of my background image.

Where I’m stumped is how to actually write this into my CSS rule (overwriting the default that’s defined in the stylesheet). For starters, I’m not sure whether I need to include the entire node tree in my selecter code, like so:

function sbRandomiser(){
var imgOffset= Math.round(Math.random()*32)*150;
var sbBox = document.getElementById("container_main").getElementById("side_bar").getElementsByTagName("<a>").getElementsByTagName("<span>");
sbBox.style.backgroundPosition = "0 -" + imgOffset + "px");
}

window.onload = sbRandomiser;

Or whether I can just home in straight on my <span> element like so:

function sbRandomiser(){
      var imgOffset = Math.round(Math.random()*32)*150;
      var sbBox = document.getElementsByName("side_bar_box");
      sbBox.style.backgroundPosition = "0 -" + imgOffset + "px";
}

window.onload = sbRandomiser;

Both methods give me errors in FF: In the first case “getElementById is not a function” and in the second case “sbBox.style is undefined”.

Any help will be greatly appreciated!

Art

2

You’re pretty close with your last example :slight_smile:

You’re just using the wrong method to get the element :wink:

Try document.getElementsByClassName(“side_bar_box”)

Or, if you want to be performance conscious:


var theBox = document.getElementsById("side_bar");
var sbBox = theBox.getElementsByClassName("side_bar_box")[0]; 
//the [0] is there because getElementsByClassName() always returns an array
//note that if you're only using "side_bar_box" once, it might be easier to give it an ID ;)
3

document.getElementsByClassName() is supported by only recent versions of “modern” browsers and not older versions.

If the function doesn’t exist in the user’s browser, you could use a customised version of getElementsByClassName().

Or better still, if the class name exists in 1 element only, give the element an id instead of a class and use document.getElementById() to access the element directly.

4

document.getElementsByName

You have an ‘s’ that doesn’t belong there.

5

what’s wrong with getElementsByName()

6

Thanks guys!

This is what I settled on incorporating your suggestions and it works a charm:

I changed my HTML to give the image box an ID rather than a class:

    <div id="side_bar">
            <a href="myURL">
            <span id="side_bar_box"></span>
            </a>
    </div>

And then I did the following with my JS.

function sbRandomiser(){
	var imgOffset = Math.round(Math.random()*32)*150;
	var sbBox = document.getElementById("side_bar_box");
	sbBox.style.backgroundPosition = "0 -" + imgOffset +"px";
}


window.onload = sbRandomiser;

So simple I almost feel embarrassed I couldn’t figure it out myself!

Thanks again!