Page background color won't change.

Discussion in 'HTML' started by test9991014@yahoo.com, Mar 19, 2008.

  1. Guest

    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.
     
    , Mar 19, 2008
    #1
    1. Advertising

  2. Neredbojias Guest

    On 19 Mar 2008, wrote:

    > 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.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
     
    Neredbojias, Mar 19, 2008
    #2
    1. Advertising

  3. Guest


    > 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.
     
    , Mar 19, 2008
    #3
  4. Guest

    Oops, I meant I did this

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

    ...and nothing changed.
     
    , Mar 19, 2008
    #4
  5. Guest

    This worked

    var foo=document.getElementsByTagName("body")
    foo[0].style.background="red"
     
    , Mar 19, 2008
    #5
  6. Scripsit :

    > 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 19, 2008
    #6
  7. wrote:
    > 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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 19, 2008
    #7
  8. wrote:
    > 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".

    > alert(document.bgcolor);
    >
    > When run, the value is apparently set because the alert displays
    > "red", however the page itself does not change color.
     
    Harlan Messinger, Mar 19, 2008
    #8
  9. Guest


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


    Thanks for that clarification.
     
    , Mar 19, 2008
    #9
  10. "Jukka K. Korpela" <> writes:

    > 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 :)


    --
    ||| hexadecimal EBB
    o-o decimal 3771
    --oOo--( )--oOo-- octal 7273
    205 goodbye binary 111010111011
     
    Eric B. Bednarz, Mar 20, 2008
    #10
  11. rf Guest

    "Eric B. Bednarz" <> wrote in message
    news:...
    > "Jukka K. Korpela" <> writes:
    >
    >> 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 :)

    --
    Richard.
     
    rf, Mar 20, 2008
    #11
  12. rf wrote:
    > "Eric B. Bednarz" <> wrote in message
    > news:...
    >> "Jukka K. Korpela" <> writes:
    >>
    >>> 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
     
    Harlan Messinger, Mar 20, 2008
    #12
  13. Neredbojias Guest

    On 19 Mar 2008, wrote:

    > 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.

    --
    Neredbojias
    http://www.neredbojias.com/
    Great sights and sounds
     
    Neredbojias, Mar 20, 2008
    #13
  14. Ben C Guest

    On 2008-03-20, Harlan Messinger <> wrote:
    > rf wrote:
    >> "Eric B. Bednarz" <> wrote in message
    >> news:...
    >>> "Jukka K. Korpela" <> writes:
    >>>
    >>>> 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.
     
    Ben C, Mar 20, 2008
    #14
  15. 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%3A%2F%2Fcfaj.freeshell.org%2Ftesting%2Fcf.shtml>


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Mar 20, 2008
    #15
  16. Ben C Guest

    On 2008-03-20, Chris F.A. Johnson <> wrote:
    > 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%3A%2F%2Fcfaj.freeshell.org%2Ftesting%2Fcf.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.
     
    Ben C, Mar 20, 2008
    #16
  17. "rf" <> writes:

    > 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.


    --
    ||| hexadecimal EBB
    o-o decimal 3771
    --oOo--( )--oOo-- octal 7273
    205 goodbye binary 111010111011
     
    Eric B. Bednarz, Mar 20, 2008
    #17
  18. Ben C <> writes:

    > 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.


    --
    ||| hexadecimal EBB
    o-o decimal 3771
    --oOo--( )--oOo-- octal 7273
    205 goodbye binary 111010111011
     
    Eric B. Bednarz, Mar 21, 2008
    #18
  19. Scripsit Eric B. Bednarz:

    > "Jukka K. Korpela" <> writes:
    >
    >> 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 21, 2008
    #19
  20. Ben C Guest

    On 2008-03-21, Eric B Bednarz <> wrote:
    > Ben C <> writes:
    >
    >> 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.


    Explicitly in which specification though? Is there a DOM specification
    that says anything about the number of body elements you're allowed?
     
    Ben C, Mar 21, 2008
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. VanReenenc
    Replies:
    1
    Views:
    1,140
    VanReenenc
    Sep 1, 2006
  2. AAaron123
    Replies:
    7
    Views:
    7,865
    AAaron123
    Dec 10, 2008
  3. fig000
    Replies:
    0
    Views:
    4,587
    fig000
    Sep 6, 2004
  4. Kamaljeet Saini
    Replies:
    0
    Views:
    483
    Kamaljeet Saini
    Feb 13, 2009
  5. Replies:
    1
    Views:
    309
    marss
    Feb 14, 2007
Loading...

Share This Page