PDA

View Full Version : changing style attributes of element using javascript



bookworm
Nov 20th, 2003, 07:54 PM
i have a div with the id of htmloutput1 when you hover over a link, this div fills with stuff. When the mouse is unhovered, i want the thing to dissappear so i want the border to go away and for background color to be the same as whats behind it. Here is what i tried

document.getElementById("htmloutput1").style="background:burlywood;border:0px solid burlywood;"

and then when you hover over it again i have it do this

document.getElementById("htmloutput1").style="background:sienna;border:2 px solid black;"

This doesnt bring up any javascript errors but it also doesnt take away the border or make the background sienna.

the page is here. http://bookworm.buildtolearn.com
Is it a problem with the code or is it just my browser(i dont know what version of IE im using cause this is a school computer

beetle
Nov 20th, 2003, 08:19 PM
the style property that you are accessing is not a string, but an object. Each CSS property is mapped as an object property. The only difference in naming convention is that when a style property is hyphenated (ie background-image) then it is camel-cased as a javascript property (backgroundImage). So, here's how you'd make those changes

var elem = document.getElementById("htmloutput1");
elem.style.background = "burlywood";
elem.style.border = "0px solid burlywood";

I must admit, I'm curious about that zero-width border :D

Oh, and you can always find the IE version by going to the "Help" menu and selecting "About Internet Explorer"

bookworm
Nov 21st, 2003, 02:49 PM
thanks. The 0 border is so that when i make the thing dissappear, the border isnt there.