Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow The "Right" Way to Change Background Color

    Hello, new user here!

    I have been getting into JavaScript, and at this point it seems basically everything useful you do with it uses the DOM, so I figure I'd post here.

    I am changing the background color of my page. I have found a few ways to do it but I'm wondering which is the "right" way. My page is Strict XHTML so I don't really want to break that.

    Code:
    document.bgColor = 'red';
    doesn't work with a css stylesheet defined like so...
    Code:
    body { background-color: black; }
    It seems necessary to change the background when stylesheets are applied by actually changing the stylesheet instead of the document itself:
    PHP Code:
            var theRules = new Array();

        if (
    document.styleSheets[0].cssRules)
            
    theRules document.styleSheets[0].cssRules
        
    else if (document.styleSheets[0].rules)
            
    theRules document.styleSheets[0].rules

        theRules
    [0].style.backgroundColor 'red'

    i can use the ( document.bgColor = 'red'; ) if I use the depreciated attribute 'bgcolor' of the 'body' tag. But I do not want to this.

    The last option available is to do neither and simply run a script that chooses the background color when the page loads.

    Which brings me to another question
    How do you run scripts when a page loads? Right now I just run the appropriate script functions after all the HTML content and before the ending </body> tag, because many functions use the DOM and reference certain tags. Is this fine?

    Thanks to anyone with helpful words.
    Last edited by Boder; 07-08-2004 at 04:30 AM. Reason: Typos, Smilies Invaded!

  • #2
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    Hi, it's me again.

    Since the CSS control with JavaScript isn't really up to snuff at the moment (i.e. IE) , I've gone with the third way. Neither FireFox nor IE could modify the background color when it was set in CSS. IE explorer was glitchy when modifying the background color when changing my stylesheet. And, rather than using outdated attributes like 'bgColor' I do all of my background-color changing with a simple JavaScript function.

    BTW I also figured out IE doesn't support fixed position. What a bummer! I guess you can't tell how IE is lacking until you start working with it as a web developer.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <style>
     body{ background:black }
    </style>
    </head>
    <body>
    <form>
    <input type="button" onclick="document.body.style.backgroundColor = 'red'">
    </form>

  • #4
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guess there's more than a few ways to do something!

    Thanks for the reply, your way is the best. It overrides the settings in my stylesheet!

  • #5
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Follow Up To My Script Question

    To anyone reading this that might not know, I think I've found the answer to my script question that I wanted to execute when the page loads.

    Before I was simply placing the script at the end of the body section so that it would execute after the page had loaded, but I think that the more correct way to do it is to use the event attribute 'onload' for the body tag.

    Like so:

    Code:
    <body onload="javscript:functions">
    
    stuff
    
    </body>
    Again, correct me if this isn't the right way!

  • #6
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After the correction, I did some tests with Firefox and Internet Explorer.

    Firefox worked fine, but Internet Explorer was painfully slow ( I mean slow ) in executing the script in the 'onload' attribute. So I'm back to inlining my script.


    Code:
    <body>
    
    stuff
    
    <script type="text/javascript">
    <!--
      functions
    //-->
    </script>
    </body>
    I don't know which way is correct, but I certainly know which way works.

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    body.onload will not fire your function until the page has completely loaded. Therefore, if you have large byte images the function will not be called until they are loaded.....

    But why are you declaring one color in your styles and then want to change it thru script?

  • #8
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Didn't i raise this very same issue?

    Well, looks like i was not alone on the whole syntax thing with regards to the alteration of a particular properties value.
    LovesWar

  • #9
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    anytime you have hyphens in markup, it becomes alternatingCase in javascript

    background-image = backgroundImage

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In a different thread, or post, i had said the same thing about how there seems to be a discrepancy between the bgcolor property, and the background property of the document object. It seemed that for one instance, you could get away with just saying,

    Code:
    document.bgcolor="whatever color"
    but in another instance, you had to do something like,

    Code:
    document.body.style.background  = "whatever color";
    otherwise, it would not work at all.

    Strange, isnt it?

    At any rate, the term body is actually a Microsoft property, and not necessarily a Netscape property. And the style, well, i think thats self-explanatory. Its the property/object by which you connect to the CSS definitions that have been set for a particular tag.

    I am not sure if you would be interested, but the function i use for something like the background image of a document goes something like this,

    Code:
    function imageFlips( paramOne, paramTwo)
    {
    if(document.images)
      {
        document.images.[paramOne].src=paramTwo;
      }
    else
      {
        alert("There's no image by the name of "+paramOne);
      }
    }
    To call the function, i would do something like this,

    Code:
    <br>
    <a href="#" onMouseOver="imageFlips( 'flower' , 'triangle.bmp') ; " >
    <img id="flower" src="flower.bmp">
    </a>
    <br>
    At any rate, the above seems to work for Internet Explorer.
    LovesWar


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •