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 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Possible to combine CSS and DOM like this....?

    Is it possible to combine CSS and DOM by doing something like this:

    <style> document.table[5] { background-color: "#FF6666" } </style>

    If so, what would be the correct syntax?

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post

    Question

    Correct code for combining object-oriented programming and style definitions, would look something like :
    Code:
    
    <script type="text/javascript">
    <!--
    
    var oMyTable	= new zTable('myTable');
    oMyTable.setBackgroundColor("#C0C0F0");
    
    //	METHODS
    function setBackgroundColor(sColor)
    {
    	this.style.backgroundColor = sColor;
    }
    
    function getBackgroundColor()
    {
    	return this.style.backgroundColor;
    }
    
    //	CONSTRUCTOR
    function zTable(sId)
    {
    	var oTemp = document.createElement('table');
    	oTemp.id	= sId;
    	oTemp.setBackgroundColor = setBackgroundColor;
    	oTemp.getBackgroundColor = getBackgroundColor;
    
    	return oTemp;
    }
    // -->
    </script>
    But I think you're more after :
    Code:
    document.getElementsByTagName('table').item(5).style.backgroundColor =  "#FF6666";
    * can be applied also thru insertRule() method
    Last edited by Zvona; 09-11-2002 at 07:35 AM.
    Zvona
    First Aid for
    Web Design

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello again. You're right... this is more along the lines of what I think I need:

    document.getElementsByTagName('table').item(5).style.backgroundColor = "#FF6666";

    The only problem is it seems to only take affect for tables appearing above this line of code. If I want to change the color of tables below this line of code, it doesn't seem to work. Is there any way to change it to make it work for them too? Would it happen to involve using document.write... or something like that? I'm new to DOM and CSS and javascript for that matter, so any additional help you can provide would be tremendously appreciated!!!

  • #4
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,460
    Thanks
    1
    Thanked 23 Times in 21 Posts
    The style property in the DOM refers to the style attribute of the element.

    You need runtimeStyle and currentStyle for Netscape 6 & IE browsers (I think runtimeStyle for IE, currentStyle for Netscape).

    I left my book at home that has the reference on this.

    Hm, for your specific question, you probably need the document.styleSheets property. Chapter 33 of my book deals with styling for HTML elements.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Alex Vincent
    You need runtimeStyle and currentStyle for Netscape 6 & IE browsers (I think runtimeStyle for IE, currentStyle for Netscape).
    Both of those are IE-only Alex. You need to use DOM2 Stylesheets and CSS

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can find more info on the Mozilla stylesheet thingies at http://www.mozilla.org/docs/dom/domr...rtIX.html#IX_S .

  • #7
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,460
    Thanks
    1
    Thanked 23 Times in 21 Posts
    that's what happens when I leave my book at home.
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #8
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, this newbie here kinda needs a newbie-phrased answer (or at least a link to a site that explains things at that level). So, what exactly would be the alternative code that would replace the following code to make it work for a table that appears either above the code OR, MORE IMPORTANTLY, below the code?:

    document.getElementsByTagName('table').item(5).style.backgroundColor = "#FF6666";

    And, will the alternate code work for both IE and Netscape?

  • #9
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, forgive me for my persistance, but let me try this question one last time....

    I'm still trying to find the correct code (for both Explorer and Netscape) that should replace the following ineffective code so that it will work on a table structure that appears below the code:

    document.getElementsByTagName('table').item(5).style.backgroundColor = "#FF6666";

    Right now, only a table appearing above this line of code will be changed by this code.... if the table appears below it, the table won't change as intended. I tried replacing ".style." with ".runtimeStyle." and ".currentStyle." as suggested by one of the post here (I beleive!), but the code still didn't work (as far as I could tell). HELP!!!




  • #10
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    currentStyle is read only so you will not need that for assigning a style, even in IE.

    runtimeStyle is only useful if you don't want to permanently modify the style object for that page. IMHO runtimeStyle isn't terribly useful, and will be only to select few that see a purposeful use for it.

    Why not give the table and ID and reference it with that?

    <table id="table5">

    document.getElementById('table5').style.backgroundColor = "#FF6666";
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    :: fondly thinks of CSS3 selector nth-child ::

    Code:
    table:nth-child(5) {
    background: blue;
    }

  • #12
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, beetle... I won't be able to insert "ID" nor "NAME" in the table tags because the tables will be within PRE-EXISTING code of banners which will be concatenated to the top AND bottom of my code... but I will already know the tables' "item[#]" relative to the entire webpage... and I thought that if I knew that, I could use "document.getElementsByTagName('table').item(#).---" somehow to override these tables' style (color, border, etc) set within the banners.

    And jkd... are you saying "table:nth-child(5) {background: blue;}" will work for a table EVEN if it follows this CSS3 code?

  • #13
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Sure, but no browser currently supports the :nth-child() pseudo-class. Mozilla supports a bunch of other CSS3 selectors and pseudo-classes though...


  •  

    Posting Permissions

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