CSS with javascript

JavaScript
1

Hi,
I want to write a javascript code to get all the css class and its information through javascript. How can I do this? Can anyone plz help me out in this?

Thanks & Regards

2

This sounds a bit like someone wanting one of those text-enlarge widgets you see on pages that want to appear “accessible”. In which case, increasing the font-size on the body or main page container does sound like a good idea, though it depends on how the CSS for the rest of the page was written.

Since those are nor useful for those without JS, I wonder if it’s also a better idea to have JS create those three “A” boxes as well, onload?

3

This is one of those cases where using JavaScript to make the changes to every applicable page element is one of the slowest ways of doing it.

A faster way is to use JavaScript to change (or add to) the class name. You could have larger and smaller sub-classes for example.

4

Normally it’s better to use the Cascading aspect of stylesheets instead.

For example, where font sizes are specified as a ratio of the standard size, you can then change the font-size of the body and all other fonts change in proportion to that as well.

The people in the CSS Forum can teach you how to use CSS so that your effort is greatly reduced.

5

Thanx for ur reply.

I want to make some modifications.
Can I retrieve the font-size of each class and modify it like increase or decrease by some 4 pixel size?

6

I agree with the others- climbing around the style Sheets collection is an interesting exercise,
but it is not an efficient way to get things done wholesale.

It also won’t tell you if the user has resized the text on his own.

Use ems as much as possible for font sizes,
so that increasing the em size of a parent element will effect all its children.

7 

function getCssDef(selectortext){
    var temp, tr, D= [], S= document.styleSheets, 
    L= S.length, i= 0;
    if(!L) return '';
    if(/^[#\\.]/.test(selectortext)){
        rx= RegExp('\\\\'+selectortext+'\\\\b');
    }
    else rx= RegExp('\\\\b'+selectortext+'\\\\b');
 
    R= S[0].cssRules? 'cssRules': 'rules';
    while(i<L){
        temp= S[i++];
        SR= temp[R];
        for(var r1= 0, RL= SR.length; r1< RL; r1++){
            tr= SR[r1];
            if(rx.test(tr.selectorText)){
                D[D.length]= tr.selectorText+
                '{'+tr.style.cssText+'}';
            }
        }
    }
    return D;
}

// test cases- prefix ids with ‘#’ and classes with ‘.’,
// just like in a style sheet
alert(getCssDef(‘p’).join(’
‘));
alert(getCssDef(’#p-opts’).join(’
‘));
alert(getCssDef(’.waiterClass’).join(’
'))