Implementing .css() and .attr() in MooTools 1.2.3

By  on  

Very rarely does a developer have the ability to work with just one framework. Often a developer needs to float between MooTools and jQuery. As you can imagine, doing so can make a developer loopy due to the syntax difference. One of the small differences that gets used often is jQuery's attr() and css() vs. MooTools' set() and setStyle(). I've implemented css() and attr() into MooTools for jQuery users.

The MooTools JavaScript Code

/* implement */
Element.implement({
	css: function(property,value) {
		var type = $type(property);
		if(value == undefined && type != 'object') {
			return this.getStyle(property);
		}
		else {
			var pvs = property;
			if(type != 'object') { pvs = {}; pvs[property] = value; }
			return this.setStyles(pvs);
		}
	},
	attr: function(property,value) {
		var type = $type(property);
		if(value == undefined && type != 'object') {
			return this.get(property);
		}
		else {
			var pvs = property;
			if(type != 'object') { pvs = {}; pvs[property] = value; }
			return this.set(pvs);
		}
	}
});

/* css testing! */
//will return "200px"
console.log('css(width) = ' + $('subject').css('width'));
//will set width value to "500px"
console.log('css(width,500) = ' + $('subject').css('width',500));
//will set width value to "700px"
console.log('css(width,700) = ' + $('subject').css({width:700}));

/* attr testing! */
//will return "moo"
console.log('attr(rel) = ' + $('subject').attr('rel'));
//will set width value to "500px"
console.log('attr(rel,mootools) = ' + $('subject').attr('rel','mootools') + ' :: ' + $('subject').attr('rel'));
//will set width value to "700px"
console.log('attr(rel,mootools ftw!) = ' + $('subject').attr({rel:'mootools ftw'}) + ' :: ' + $('subject').attr('rel')

I personally don't prefer this syntax in MooTools but hopefully this helps someone!

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

  • By
    Simple Image Lazy Load and Fade

    One of the quickest and easiest website performance optimizations is decreasing image loading.  That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images.  It's a bit jarring when you're lazy loading images and they just...

Discussion

  1. While this is cool to show off MooTools’ flexibility, the verbs set/get are useful because, well, they are verbs and the user can easily tell their purpose. There is no way that id see a css() method and know that it acts as both the getter and setter. People who would find this useful should just use jQuery.

    Your code does illustrate a good point — setStyle and setStyles could probably be combined into a single method — probably.

  2. I agree with Em, while the simplicity is nice in JQuery, the MooTools functions use logical naming conventions

  3. I use the below to speed up logging :) Hope it helps someone.

    Window.implement({
        'log':    function() {
                      return console && console.log ? console.log : new function(){};
                  }()
    });
    
  4. I also agree with Em. Combining the setStyle and setStyles function would be cool and also could lead to a bigger flexibility imo.

    The naming convention of mootools is much better in this example. Regardless of knowing the framework or not, every programmer does instantly understand what the code is “doing”.

    Another demonstration of mootools > all ;)

  5. fsdgdf

    niec..

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