SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS with javascript

    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. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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('\n'));
    alert(getCssDef('#p-opts').join('\n'));
    alert(getCssDef('.waiterClass').join('\n'))

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    Code:
    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('\n'));
    alert(getCssDef('#p-opts').join('\n'));
    alert(getCssDef('.waiterClass').join('\n'))

    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by girishpalmah View Post
    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?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    This sounds a bit like someone wanting one of those text-enlarge widgets you see on pages that want to appear "accessible".
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

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