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.

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Scrolling &#8220;Go To Top&#8221; Link Using Dojo

    One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go...

  • By
    &#8220;Top&#8221; Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

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!