O'Reilly

MooTools: Set Style Per Media

By on  

I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias. What if I want to set a style for only a specific media type? I've created a setStile() method that allows you to specify the media for which a style is set.

The MooTools JavaScript

Element.implement({
	'setStile': function(key,value,media) {
		var style = $$('style[media=' + media + ']')[0];
		if(!style) {
			style = new Element('style',{
				'type': 'text/css',
				'media': media
			});
			style.inject(document.head);
		}
		if(!this.get('id')) {
			this.set('id',$uid(this));
		}
		style.set('text',style.get('text') + '#' + this.get('id') + '{ ' + key + ':' + value + '; }');
		return this;
	},
	
	'setStiles': function(keyvalhash,media) {
		for(var key in keyvalhash) {
			this.setStile(key,keyvalhash[key],media);
		}
		return this;
	}
});

Example Usages

$('nonoprint').setStile('color','#f00','print');
$('nonoprint').setStile('display','inline','print');
$('nonoprint').setStile('border','1px solid #00f','print');
$('nonoprint').setStiles({
	'background-color': '#fffea1',
	'font-weight': 'bold',
	'opacity': '.5'
},'print');

The Post-Use HTML View

<style type="text/css" media="print">
#nonoprint{ color:#f00; }
#nonoprint{ display:inline; }
#nonoprint{ border:1px solid #00f; }
#nonoprint{ background-color:#fffea1; }
#nonoprint{ font-weight:bold; }
#nonoprint{ opacity:.5; }
</style>

Obviously, as you can see from the Post-Use HTML, this isn't an elegant solution but it works in all browsers I tested except Internet Explorer. Hopefully a better solution is presented in the future.

Treehouse Learning

Upcoming Events

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

Incredible Demos

  • Introducing MooTools Dotter

    It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...

  • Assign Anchor IDs Using MooTools 1.2

    One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement. I recently ran...

Discussion

  1. I’ve noticed that this code no longer works in IE8. This line seems to be causing the problems:

    style.set('text',style.get('text') + '#' + this.get('id') + '{ ' + key + ':' + value + '; }');
    

    Any ideas?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!