...

View Full Version : Changing the property of a CSS class via DOM?



dep
01-05-2006, 03:55 PM
Hello. I have several table cells with the class name "maximize" -- The display of the class is set to "none" using CSS.

I want to be able to, through DOM, change the "display" property of this class to "block" instead of changing each ID in the class' display property individually.

Is this possible?

dep

mark87
01-05-2006, 04:04 PM
Could you do something like -

document.body.childNodes[4].childNodes[3].style.display = "block"

You'd have to work out how many nodes the table etc is in though.

Or

document.getElementByClass('maximize').style.display = "block"

Bill Posters
01-05-2006, 04:26 PM
Could you do something like -

document.body.childNodes[4].childNodes[3].style.display = "block"

You'd have to work out how many nodes the table etc is in though.

Or

document.getElementByClass('maximize').style.display = "block"


I thought getElementByClass wasn't actually a standard method, but one put together by developers to mimic that functionality. If so, you'll need to show the getElementByClass function script itself.


Fwiw, a more 'separated' approach would be to use cssRule (http://developer.mozilla.org/en/docs/DOM:cssRule) or posisbly the DOM stylesheet Object (http://developer.mozilla.org/en/docs/DOM:stylesheet), rather than to address style properties directly within the js.

mark87
01-05-2006, 04:35 PM
I thought getElementByClass wasn't actually a standard method, but one put together by developers to mimic that functionality. If so, you'll need to show the getElementByClass function script itself.

You're right sorry, I was thinking it was like getElementById or getElementsByTagName. :o

Bill Posters
01-05-2006, 04:59 PM
Fwiw…

function appendRule() {

var mystyles = document.styleSheets[0];
var totalrules = (mystyles.cssRules) ? mystyles.cssRules.length : mystyles.rules.length
if (mysheet.deleteRule) { // standards method
mystyles.insertRule(".maximise { display: block; }", totalrules);
} else if (mysheet.addRule) { // IE method
mystyles.addRule(".maximise", "display: block")
}

}


[edit]

Fekkit, just seen how patchy the support is for doing things the right way. :harrumph!:

Oh well, back to mixing it up we go…

function appendRule() {

var allElems = document.getElementsByTagName('*');
for (var i = 0; i < allElems.length; i++) {
var thisElem = allElems[i];
if (thisElem.className && thisElem.className == 'maximise') {
thisElem.style.display = 'block';
}
}

}

;)

…though it may still be possible to simply use js/dom to link/import an addition stylesheet that overrides the display property of the class maximise &#224; la 'stylesheet switcher', though that might be chasing the ideal a little too doggedly.

dep
01-05-2006, 11:06 PM
Ahh. something like that might work. thx! :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum