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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Set the bgcolor attribute value

    Hi,

    The following doesn't work:

    Code:
    <!DOCTYPE HTML>
    <title>Sample flash</title>
    <embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
    
    <script type="text/javascript">
    document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
    </script>
    But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

    Any help is appreciated!
    Mike

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    For any style changes in javascript you are best to use the .style approach:
    Code:
    <!DOCTYPE HTML>
    <title>Sample flash</title>
    <embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
    
    <script type="text/javascript">
    document.getElementById("foo").style.backgroundColor="#00FF00";
    </script>
    Notice the camelcase for the style you are changing. Anything in CSS that has a hyphen in its name will be camelcase when changing it from javascript.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    bgcolor is deprecated. Use the element's style object.

    Code:
    <div id = "foo">Some Stuff</div>
    
    <script type = "text/javascript">
    document.getElementById("foo").style.backgroundColor = "00FF00";
    </script>
    rowsdowner types faster than I do!

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 07-22-2011 at 04:29 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    For any style changes in javascript you are best to use the .style approach
    Thanks for the answer, but they are two different things. To see what I mean please try adding bgcolor="#00FF00" to the embed code and compare it with changing the style background color.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    bgcolor is deprecated. Use the element's style object.

    Code:
    <div id = "foo">Some Stuff</div>
    
    <script type = "text/javascript">
    document.getElementById("foo").style.backgroundColor = "00FF00";
    </script>
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Dear Philip,

    As far as my limited Knowledge serves me, bgcolor is widely used for flash files and it's valid:
    http://kb2.adobe.com/cps/127/tn_12701.html

    Besides, nothing can replace it and create the same effect. Please correct me if I'm mistaken.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Rain Lover View Post
    Dear Philip,

    As far as my limited Knowledge serves me, bgcolor is widely used for flash files and it's valid:
    http://kb2.adobe.com/cps/127/tn_12701.html

    Besides, nothing can replace it and create the same effect. Please correct me if I'm mistaken.
    bgcolor is deprecated - obsolete - and may not be supported in future.
    setAttribute has serious "issues" in IE and is only partially supported.
    As suggested, you would be best advised to use the element's style object. Or you could use a css class.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Actually I'm building a widget in which users might choose a custom background color or set it to transparent.
    Here's what I initially tried without the setAttribute method:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Test</title>
    <script type="text/javascript">
    var x;
    var y;
    var z;
    z = "#00FF00";
    if (z == "transparent" || z == "") {
       x = ""; y = "transparent";
      }
    else {
       x = z; y = "window";
    }
    </script>
    </head>
    <body>
    <embed id="foo" bgcolor="'+x+'" wmode="'+y+'" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
    </body>
    </html>
    But it didn't work. I wonder what I did wrong.
    Thanks again!


  •  

    Posting Permissions

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