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

[tired&lonely]

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?

[Zvona]

Correct code for combining object-oriented programming and style definitions, would look something like :

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

document.getElementsByTagName('table').item(5).style.backgroundColor = "#FF6666";
* can be applied also thru insertRule() method

[tired&lonely]

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

[Alex Vincent]

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.

[jkd]

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

[Bosko]

You can find more info on the Mozilla stylesheet thingies at http://www.mozilla.org/docs/dom/domref/dom_shortIX.html#IX_S .

[Alex Vincent]

:p that's what happens when I leave my book at home.

[tired&lonely]

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?

[tired&lonely]

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



:confused:

[beetle]

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";

[jkd]

:: fondly thinks of CSS3 selector nth-child ::


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

[tired&lonely]

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?

[jkd]

Sure, but no browser currently supports the :nth-child() pseudo-class. Mozilla supports a bunch of other CSS3 selectors and pseudo-classes though...