www.webdeveloper.com
Results 1 to 5 of 5

Thread: Activating blocks of CSS with JavaScript

  1. #1
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242

    Activating blocks of CSS with JavaScript

    I want to change styles with JavaScript, but I would prefer that the styles be written in CSS in a style sheet for organization reasons. I know I can invoke an alternate stylesheet with JS:
    Code:
    <link rel="alternate stylesheet" type="text/css" title="big-style"
        href="http://foo.om/css/big-style.css">
    but there might be many of these alternatives and I'd prefer all CSS was in a single file (for performance). Just as you can have many blocks of styles (in same file) activated by media queries, I'd like to have in a single file many blocks of styles that can be triggered by JavaScript.

    Is this possible?

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    simply add a class in front of different rules, and use javascript to turn those classes on/off for the <body> tag, so they hit all selectors.

    for example:

    Code:
    body .setup { display: none; }
    body .play{ display: block ; }
    
    body.setup .setup { display: block; }
    body.setup .play { display: none; }
    body.setup .tooltips { display: block; }
    
    body.setup h1 { font-size: 10px; }

    in javascript, toggle between modes using classes:
    Code:
    
    //enter setup mode:
    function enterSetup(){
      document.title="Game Config";
       document.body.classList.add("setup");
    }
    
    
    //leave setup mode
    function saveSettings(){
     // saving setup form ...
      document.body.classList.remove("setup");
      document.title="Game On!";
    }

    of course, all the nouns in the above example are madeup, but this is the principle.


    you can add several classes, so in CSS you can make pools of settings depending on the "mode" of your app.

    these can be independently selected, so you can have something like "setup largePrint ie widscreen" as body classes, and targeted CSS that does the right thing in each case.

    this puts all the power in CSS, no more element.style.xxx...

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    That's a great tip. It's not exactly what I was looking for but it's probably the best available solution and I'm going to go with it.

    Thanks much.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    there is also document.styleSheets, and styleSheet.disabled, which does what it sounds like, but i have given up using those because they are too complicated.
    the two big issues with that approach are that some styleSheets import other styleSheets which means you have to iterate though and look at the rules of each stylesheet to look for imports, and secondly that process is complicated because some sheets come from off-site, and trying to read those will throw an exception and halt all your code, so you can only iterate on-site recursively-defined rules.


    partial iteration sucks, just use classes and save yourself a lot of headaches.

    you will have more customization options and expandable code in the end, while lowering the editing threshold to css skills instead of js skills.

  5. #5
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    I wouldn't mind putting the CSS chunks in separate files - that's conceptually clean enough for me. But having numerous small CSS files dynamically loaded brings a performance issue I want to avoid.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles