Basic CSS manipulation using JavaScript

Question

I'm currently learning JavaScript, but I'm very weak on the fundamentals. I'm trying to write a function that changes the background color when a link is clicked, can you please advise me on what I'm doing wrong?

<head>

<script type="text/javascript">

function change()
{
var abra = document.getElementbyId("body").style;
abra.background-color = "black";

}
</script>

</head>

<body>

<div id="body" style="background-color: red;">
<a href="#" id="test" onclick="return change()">Test</a>
sdfdsfsdfds

</div>

</body>

EDIT: For clarification, I was trying to change the background color of the DIV "body".

mgiuffrida · Accepted Answer · 2012-05-12 01:33:57Z

4

The property you're looking for is backgroundColor:

abra.backgroundColor = "black";

In general, Javascript uses the corresponding camelCase for CSS style properties. See a list of some properties for examples.

answered May 12, 2012 at 1:33

mgiuffrida

3,6292 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Samuel · Accepted Answer · 2012-05-12 01:34:06Z

1

Instead of

var abra = document.getElementbyId("body").style
abra.background-color = "black";

try

document.body.style.backgroundColor = "black";

document.getElementbyId("body")

looks for an element with ID body, and

abra.background-color

is the same as

(abra.background) - color

which will probably result in an error telling you there is no var named color.

answered May 12, 2012 at 1:34

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

1 Comment

mgiuffrida Over a year ago

This changes the bgcolor of the entire body, not just the div that happens to have the id "body". OP may want to achieve one or the other, just note that they're different.

Andreas Louv · Accepted Answer · 2012-05-12 01:34:18Z

0

use camelCase:

background-color => backgroundColor

var abra = document.getElementById("body").style;
abra.backgroundColor = "black";

But if you want the body tag use:

document.getElementsByTagName("body")[0]

or

document.body // recommended

answered May 12, 2012 at 1:34

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Collectives™ on Stack Overflow

Basic CSS manipulation using JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related