[Cocoa]

Why don't you just use CSS? But looking at the code, this line doesn't seem to be correct but I'm no JS expert. But the image won't be found with the following code because that's not a valid URL.

[@Tom]

Cocoa, on 09 April 2012 - 09:52 AM, said:

Why don't you just use CSS? But looking at the code, this line doesn't seem to be correct but I'm no JS expert. But the image won't be found with the following code because that's not a valid URL.

Really? It's not a valid URL (sarcasm). The js is needed. Can't use CSS for this.

[Qasim]

Try this:

function change() {
    var bgimg = document.getElementById('bgimage');
    bgimg.style.backgroundImage = "url('http://imgurl') repeat";
}

change();

You forgot quotes around your id when populating the bgimg variable. Secondly, verify that your div certainly has "id='bgimage'" as well. Also might want to verify if your image path exists.

[@Tom]

Basically I downloaded greesemonkey and was trying things out but couldnt change a div background.

Edit it didn't work

[Renegade]

Your CSS that you're trying to apply to the

div

is the part that's wrong. Basically what you're doing, in CSS, is this:

div {
    background-image: url(img) repeat;
}

That is incorrect. You can only specify the background image when using the

background-image

property. You were specifying the image and the repeating behavior. This is invalid CSS.

Your CSS code should be:

div {
    background-image: url(img);
    background-repeat: repeat;
}

And therefore your Javascript:

var div = document.getElementById("div-id");
div.style.backgroundImage = "url(img)";
div.style.backgroundRepeat = "repeat";

You can alternatively use the shorthand syntax but that should solve your problem.

[Qasim]

Thanks, Renegade. For some reason, I was thinking it was fine to use shorthands on the background-image. Would it be possible to just use

div.style.background = "url(img) repeat";

instead of specifying "backgroundImage"?

[arronhunt]

You could...

Renegade beat me to it.

[@Tom]

Thanks guys it worked, turns out the issue was I had a user selected background . Check it out,


Anyways cools,

[@Tom]

New question why does

getElementsByClassName

Not get the various divs when getElementById does.

[Qasim]

How are you using getElementsByClassName? It will return an array, so to get a single dom object from it, you must do something like

getElementsByClassName('awesome')[0]

or whatever array number.

[@Tom]

Qasim, on 09 April 2012 - 10:00 PM, said:

How are you using getElementsByClassName? It will return an array, so to get a single dom object from it, you must do something like

getElementsByClassName('awesome')[0]

or whatever array number.

Wow the article I read totally left out that it returns an array, there goes 15mins of wasted time. >

[callumacrae]

It doesn't return an array, it returns a NodeList, which pretends to be an array but updates whenever you change anything:

var cakes = document.getElementsByClassName('cake');
cakes.length; // 3

document.append(newCake);

cakes.length; // 4

[@Tom]

callumacrae, on 10 April 2012 - 02:23 AM, said:

It doesn't return an array, it returns a NodeList, which pretends to be an array but updates whenever you change anything:

var cakes = document.getElementsByClassName('cake');
cakes.length; // 3

document.append(newCake);

cakes.length; // 4

So can I do something like

cats = document.getElementByClassName('class');

cats.style.backgroundColor = "#ffffff";

[callumacrae]

itom07, on 10 April 2012 - 07:06 AM, said:

So can I do something like

cats = document.getElementByClassName('class');

cats.style.backgroundColor = "#ffffff";

Nope, that function doesn't exist. You want something like this:

var cats = document.getElementsByClassName('class');

cats[0].style.backgroundColor = "#ffffff";

[@Tom]

What If I want like the first five of the classes

[callumacrae]

itom07, on 10 April 2012 - 07:38 AM, said:

What If I want like the first five of the classes

var cats = document.getElementsByClassName('class');

for (var i = 0; i < 5; i++) {
    cats[i].style.backgroundColor = "#ffffff";
}

:-/

[@Tom]

I thought it would be more complicated than a loop.

[callumacrae]

no

[Renegade]

callumacrae, on 10 April 2012 - 08:06 AM, said:

var cats = document.getElementsByClassName('class');

for (var i = 0; i < 5; i++) {
    cats[i].style.backgroundColor = "#ffffff";
}

:-/

Array.prototype.forEach.call(document.getElementsByClassName("class"), function(v, i) {
    if(i < 5) v.style.backgroundColor = "#f30e24";
});

:>