Cascading Style sheet won't change with javascript ?

Question

ok can you change a property of an elment with javascript if you have the style predefined beforehand in an external styesheet?

I would assume yes, but my background image for some reason will not change.

html code:

and then when a user clicks a button to change the background. The background image for the whole body changes and then the background image for this element which is basically a big box with all the main content of the page in this box on the center of the page.

here is the javascript code for that:

document.getElementById('centerofpage').style.backgroundImage="url(/img/wall paper/Clouds.jpg)";

these images load fine as I can set the background image in CSS to be this image and it loads fine, but for some reason JS won't work.

Four answers:

Random Malefactor

2008-01-01 10:00:45 UTC

That url() function or macro or whatever it is (I've never seen a clear definition) only works in HTML (including STYLE tags, obviously.) It doesn't mean anything to javascript, especially as part of a string constant.



So try omitting that when you assign the style.



-----



All the little incompatibilities are festive, aren't they? You may need a conditional branch, based on browser.



The best cross-platform JS reference I've ever seen is:



http://www.quirksmode.org/js/contents.html



They go way into browser detection, and the differences between them.

iam

2008-01-01 09:58:38 UTC

Hi Matt -



to get the element id you have to use the ID that you assigned to your td element.



So:

if ( document.getElementByID ) {

document.getElementById( 'centerofpaper' ).style.backgroundImage = 'newImage.jpg';

}



The if statement checks that your version of js/browser supports that function call.

Good luck.

?

2016-05-28 13:26:20 UTC

You should study CSS pseudo class.

richarduie

2008-01-01 23:05:09 UTC

Here's a sample with both predefined and undefined background image attributes for table cells. The first cell starts with a style-defined image. The second cell start without an image. Clicking the button in the first cell changes the image from the first to the second for that cell. Clicking the button in the second cell sets the second image as the background for the second cell. The code works in both Firefox and IE.



The first image url is:

http://f9g.yahoofs.com/groups/

g_16808904/.HomePage/__sr_/

4d9b.jpg?grAcXfHBlo5KOQty



The second image url is:

http://us.i1.yimg.com/

us.yimg.com/i/us/sch/gr/

ga_ans_uh_logo.gif



~~~~~~~~~~~~

table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... table cell1 content here... onclick="setBg('cell1');" value="change bg image" />

table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... table cell2 content here... onclick="setBg('cell2');" value="change bg image" />

Answer 1

That url() function or macro or whatever it is (I've never seen a clear definition) only works in HTML (including STYLE tags, obviously.) It doesn't mean anything to javascript, especially as part of a string constant.



So try omitting that when you assign the style.



-----



All the little incompatibilities are festive, aren't they? You may need a conditional branch, based on browser.



The best cross-platform JS reference I've ever seen is:



http://www.quirksmode.org/js/contents.html



They go way into browser detection, and the differences between them.

Answer 2

Hi Matt -



to get the element id you have to use the ID that you assigned to your td element.



So:

if ( document.getElementByID ) {

document.getElementById( 'centerofpaper' ).style.backgroundImage = 'newImage.jpg';

}



The if statement checks that your version of js/browser supports that function call.

Good luck.

Answer 3

You should study CSS pseudo class.

Answer 4

Here's a sample with both predefined and undefined background image attributes for table cells. The first cell starts with a style-defined image. The second cell start without an image. Clicking the button in the first cell changes the image from the first to the second for that cell. Clicking the button in the second cell sets the second image as the background for the second cell. The code works in both Firefox and IE.



The first image url is:

http://f9g.yahoofs.com/groups/

g_16808904/.HomePage/__sr_/

4d9b.jpg?grAcXfHBlo5KOQty



The second image url is:

http://us.i1.yimg.com/

us.yimg.com/i/us/sch/gr/

ga_ans_uh_logo.gif



~~~~~~~~~~~~