Search

Blog Categories

Post Calendar

June 2017
M T W T F S S
« Aug    
 1234
567891011
12131415161718
19202122232425
2627282930  

Changing Styles for a Class

OK this was a tricky one because Javascript has no hooks on the class of elements.  You can ‘getElementById’ but not ‘getElementByClass’ so ….  I wanted to change the Javascript enabled parts of my form from hidden to unhidden.  They all had class=”hidden” or class=”*** *** hidden”.  The solution: search by tag and match the string in className like so:
function unHide(atag) {
    //collect all the form elements with the given tag (the little monkeys!)
    var monkeys = document.getElementsByTagName(atag);
    //loop through aforementioned collection of monkeys
    for (var i = 0; i < monkeys.length; i++) {
        var str = monkeys[i].className;
        //check for a match in the class attribute
        if (str.search('hidden')>=0){
            //sort them out with a quick change of style inline
            //(overriding the previous styles for the little monkeys in style.css)
            monkeys[i].setAttribute('style', 'display:inline;');
        }
    }
    return true;
}
Et Voila!  There we ‘av it – lovely :-D   <<tummy stretch>>

One Comment

Leave a Reply

You must be logged in to post a comment.