Page background color won't change.

[test9991014]

Hi all,

I'm altering a page whose background color being set in CSS
somewhere. But I need to change the background color
in Javascript. I tried doing so with this:

document.bgcolor = "red";
alert(document.bgcolor);

When run, the value is apparently set because the alert displays
"red", however the page itself does not change color.

Anybody know what's going on?

Thanks.

 

[Neredbojias]

Hi all,

I'm altering a page whose background color being set in CSS
somewhere. But I need to change the background color
in Javascript. I tried doing so with this:

document.bgcolor = "red";
alert(document.bgcolor);

When run, the value is apparently set because the alert displays
"red", however the page itself does not change color.

Anybody know what's going on?

Yes, but it isn't you... "document.bgcolor" is SO wrong it flabbergasts
me! Google for "document.getElementById" and the css setting "background"
for further information.

 

[test9991014]

Yes, but it isn't you... "document.bgcolor" is SO wrong it flabbergasts
me! Google for "document.getElementById" and the css setting "background"
for further information.

The body tag has no id, nor can I set one. However I did this

var foo = getelementbytagname("body")
foo.style.background = "red"

....and nothing changed.

 

[test9991014]

Oops, I meant I did this

var foo = document.getelementbytagname("body")
foo.style.background = "red"

...and nothing changed.

 

[test9991014]

This worked

var foo=document.getElementsByTagName("body")
foo[0].style.background="red"

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

The body tag has no id, nor can I set one.

So whose document are you playing with, and why?

var foo = getelementbytagname("body")
foo.style.background = "red"

When everything else fails, read the ******* manual. In this case, start
from a primer on JavaScript, preferably a mordern one which is based on
W3C DOMs.

This is simple sample code, just to prove that you need to actually
study JavaScript before trying to use it:

var body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = "red";

Note that JavaScript is case sensitive (and typically uses camelCase for
identifiers).

Beware that this code needs to be placed so that when it is executed,
the document, including the body element, has been loaded and parsed.

Followups trimmed. This is about JavaScript and DOM, not CSS, so both
group choices were wrong, but alt.html (a catchall group) is less wrong.

 

[Jonathan N. Little]

This worked

var foo=document.getElementsByTagName("body")
foo[0].style.background="red"

Yes it helps when you

a) use the correct function name, yes it is case sensitive
b) take note of the return value

It "works" if client has JavaScript enabled.

 

[Harlan Messinger]

Hi all,

I'm altering a page whose background color being set in CSS
somewhere. But I need to change the background color in Javascript. I
tried doing so with this:

document.bgcolor = "red";

This doesn't alter any style. It doesn't do anything, in fact, other
than add a previously nonexistent field called "bgcolor" to the document
object and set its value to "red". Now, the BODY tag in transitional
HTML has an attribute called "bgcolor", but in Javascript, for whatever
reason, it's called document.bgColor, and names are case-sensitive in
Javascript.

Still, this has nothing to do with any properties that have been set
with CSS. A CSS property for an element is set in Javascript as follows:

var element = ...;
element.style.propertyName = "...";

The name of the CSS background color property in Javascript is
"backgroundColor".

 

[test9991014]

but in Javascript, for whatever
reason, it's called document.bgColor, and names are case-sensitive in
Javascript.

Thanks for that clarification.

 

[Eric B. Bednarz]

var body = document.getElementsByTagName("body")[0];

That's sort of silly. How many instances of the element type body would
you expect in a HTML document, by the way?

var body = document.body;

is shorter, better supported, usually faster, and part of the
HTMLDocument interface.

(not that I read alt.html, but anyway

 

[rf]

var body = document.getElementsByTagName("body")[0];

That's sort of silly.

No it's not. getElementsByTagName returns a collection. That is why it has
an *s* in its name. Elements. The fact that there is only one element in
that collection is irrelevant.

How many instances of the element type body would
you expect in a HTML document, by the way?

One. But there might be several p elements to getElementsByTagName("p")
would return a collection with multiple elements in it.

By your reasoning we sould have a special getElementByTagName for those
elements like body and head that can only occur once in a document. Now
*that* would be silly

 

[Harlan Messinger]

var body = document.getElementsByTagName("body")[0];

That's sort of silly.

No it's not. getElementsByTagName returns a collection. That is why it has
an *s* in its name. Elements. The fact that there is only one element in
that collection is irrelevant.

How many instances of the element type body would
you expect in a HTML document, by the way?

One. But there might be several p elements to getElementsByTagName("p")
would return a collection with multiple elements in it.

By your reasoning we sould have a special getElementByTagName for those
elements like body and head that can only occur once in a document. Now
*that* would be silly

I'm not sure that that was Eric's point. Probably owing to the very fact
that every document has one body, and that the body is an important
element that is often accessed in client-side scripting, the HTML DOM
provides the HTML document object with a body property, document.body.
There isn't a document.head, but I'm not sure how useful one would be.

http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-26809268

 

[Neredbojias]

This worked

var foo=document.getElementsByTagName("body")
foo[0].style.background="red"

document.getElementsByTagName - nice intuitive leap and functionable in the
latest versions of the 4 main browsers. 'Think it even works in ie6.
Kudos.

 

[Ben C]

var body = document.getElementsByTagName("body")[0];
That's sort of silly.

No it's not. getElementsByTagName returns a collection. That is why it has
an *s* in its name. Elements. The fact that there is only one element in
that collection is irrelevant.

How many instances of the element type body would
you expect in a HTML document, by the way?

One. But there might be several p elements to getElementsByTagName("p")
would return a collection with multiple elements in it.

By your reasoning we sould have a special getElementByTagName for those
elements like body and head that can only occur once in a document. Now
*that* would be silly

I'm not sure that that was Eric's point. Probably owing to the very fact
that every document has one body, and that the body is an important
element that is often accessed in client-side scripting, the HTML DOM
provides the HTML document object with a body property, document.body.
There isn't a document.head, but I'm not sure how useful one would be.

http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-26809268

A document can have as many bodies as you like. Try this:

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function main()
{
var body = document.getElementsByTagName("body")[0];

for (var i = 0; i < 4; ++i)
{
var subBody = document.createElement("body");
body.appendChild(subBody);
subBody.appendChild(document.createTextNode("Body number " + i));
}

var bodies = document.getElementsByTagName("body");
for (var i = 0; i < bodies.length; ++i)
alert(bodies);
}

window.onload = main;
</script>
</head>
<body>
</body>
</html>

Firebug will show you the five body elements all sitting there in their
proper places.

 

[Chris F.A. Johnson]

On 2008-03-20, Ben C wrote:
....

A document can have as many bodies as you like.

...unless you want valid HTML.

See: <http://validator.w3.org/check?uri=http://cfaj.freeshell.org/testing/cf.shtml>

 

[Ben C]

On 2008-03-20, Ben C wrote:
...

...unless you want valid HTML.

See: <http://validator.w3.org/check?uri=http://cfaj.freeshell.org/testing/cf.shtml>

Yes, your document is invalid. But mine wasn't: there was only one BODY
in the HTML, and another four put there by JavaScript using
createElement and appendChild.

As far as I know that doesn't violate any standard or specification, but
I am willing to be corrected.

 

[Eric B. Bednarz]

getElementsByTagName returns a collection.

If you want to quibble, it returns a NodeList (some of the attributes of
the aforementioned HTMLDocument interface return a HTMLCollection .

By your reasoning we sould have a special getElementByTagName for those
elements like body and head that can only occur once in a document.

You are missing the point. By your reasoning, we would say

/^a/.test('asdf')

to see if the string ‘asdf’ starts with the letter ‘a’. Which isn’t
wrong. It’s just silly.

I see stuff like that every other day, btw. It’s a typical newbie thing
to use document.getElementById and (document|element).getElementsByTagName
all over the place because that’s supposed to be like totally standards
compliant and stuff. If the HTMLDocument interface doesn’t suffice, and
XPath is not available, it’s rather a last resort.

 

[Eric B. Bednarz]

Yes, your document is invalid. But mine wasn't: there was only one BODY
in the HTML, and another four put there by JavaScript using
createElement and appendChild.

As far as I know that doesn't violate any standard or specification, but
I am willing to be corrected.

You are appending element types where they explicitly don’t belong, so
you are violating the specifications. That’s not to say that it won’t
work in one or several user agents, though. The one had never anything
to do with the other. Ever.

You can usually hide that from DTD or schema based validation tools by
using javascript all right; OTOH, the DOM is but an API, and the same
methods would cause errors when mangling the DOM server-side.

Just like character references to non-SGML characters in the document
instance set, it’s not invalid but something the application has to cope
with, and usually it does just that.

 

[Jukka K. Korpela]

Scripsit Eric B. Bednarz:

var body = document.getElementsByTagName("body")[0];

That's sort of silly.

Not as silly as the OP's attempt to use getelementbytagname("body").

var body = document.body;

is shorter, better supported, usually faster, and part of the
HTMLDocument interface.

And it's more specialized than general mechanism, the extent of support
hardly matters much (authoring for Netscape 4, anyone?), the speed is
immaterial, and specific to the HTMLDocument interface.

But instead of arguing over this, I'd just like to point out that I
presented a _correct_ way of doing something the way the OP tried to do.
The lesson was that authors and programmers should be lazy and forgetful
enough to _check_ things out from manuals, references, or
specifications, instead of wasting their and others' time in pointless
trial and error. This applies especially to perwerse (the "w" is here a
contamination of "v" and "l") programming languages.

 

[Ben C]

You are appending element types where they explicitly don't belong, so
you are violating the specifications.

Explicitly in which specification though? Is there a DOM specification
that says anything about the number of body elements you're allowed?