Dynamically Add a CSS Class using Javascript

Mango — Thu, 10 Aug 2006 19:42:30 +0000

I was writing a module for a webapp today and was thinking how cool it would be if I could dynamically add CSS classes using Javascript. At that particular moment, I had all the classes for all the modules grouped together in one big file, but since sometimes I didn't load all the modules, it was inefficient.

It took me a while to find some examples on doing this, so figured I would post the function I wrote in case anyone else has this same problem.

function addCSSclass(className, classRule) {
 if (document.all) {
  document.styleSheets[0].addRule("." + className, classRule)
  } else if (document.getElementById) {
  document.styleSheets[0].insertRule("." + className + " { " + classRule + " }", 0);
  }
 }

Enjoy!

CSS Media Types

Mango — Mon, 19 Jun 2006 04:17:40 +0000

One thing that really frustrates me is when I try to print something off a website, and my printer prints three pages of headers, graphics, and menus, and ONE page of what I actually wanted to print. Some designers have thought ahead and have a link to open their pages in a new window, unformatted, but this doesn't always work, especially if the page is, for example, dynamically generated by submitting a form, or the user has a pop-up blocker. Fortunately, there's a really cool CSS technique for making this easier. It lets you use one stylesheet for what your users see on the screen, and a completely different stylesheet for what you print! And it works like a charm!

This technique uses CSS Media Types, or as they're commonly known, @media rules. And the best thing is, @media rules take about two seconds to learn how to use. Here's an example:

@media screen { 
 /* This rule says: do not display any elements with the class printonly. */
 .printonly { display:none; } 
 }
@media print {
 /* This rule says: do not print elements that have the class displayonly. */
 .displayonly { display:none; }
 }

If you use this example, just enclose all your headers and whatnot with

and anything that should be printed but not displayed such as a copyright message with

. See?! I told you that was easy!

The Fruits of my Labour » CSS

Dynamically Add a CSS Class using Javascript

CSS Media Types