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 6 of 6
  1. #1
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing the property of a CSS class via DOM?

    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

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"
    Last edited by mark87; 01-05-2006 at 04:06 PM.

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by mark87
    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 or posisbly the DOM stylesheet Object, rather than to address style properties directly within the js.

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Bill Posters
    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.

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Fwiw…
    Code:
    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…
    Code:
    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.
    Last edited by Bill Posters; 01-05-2006 at 05:11 PM.

  • #6
    dep
    dep is offline
    Regular Coder
    Join Date
    Nov 2005
    Posts
    121
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh. something like that might work. thx!


  •  

    Posting Permissions

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