Question

I’m just messing around learning about JavaScript and I wanted to change the color of my background by resting my mouse over a link. Really I just want to learn about onMouseOver. I have:

<a href="http://www.w3schools.com" onMouseOver="document.bgcolor='lightgreen'">Visit W3Schools</a>

I tried applying this to radio buttons too that would change the bg color onclick, however If I wanted a preview of the color (by using onMouseOver) that part didn’t work as it doesn’t with the above.

Is the solution so obvious I’m overlooking it? Thanks for any help.

Answer 1

No, it’s not obvious. JavaScript is not so easy to handle. And you have to learn the types and names of the objects you can use in JavaScript.

The object document does not have a element bgcolor

What you are trying is to change the CSS-style of the element body of the document

document.body.style.backgroundColor = 'lightgreen'; 

One could do it by using the document object model (DOM) which is what you tried, but you have to respect the case. the correct form of the document’s attribute is bgColor not bgcolor (Capital letter C).

// bad style
document.bgColor = 'lightgreen';

But it is not advisable. Why?

1. document is a part of the Document Object Model (DOM) and therefore
   mostly responsible for the data and the structure of the … well
   … document. The bgColor attribute of document maybe a relic of
   the dark HTML medieval, the pre CSS times.
2. The document should contain the data, and not the representation (aka style) of the data. That what the style attribute of every DOM element is for.
3. You can overrule the bgColor of the document simply by giving the body a CSS style for background-color. The document still has the bgColor attribute and the value, but what you see is the value of the CSS style