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
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • By
    Styling CSS Print Page Breaks

    It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

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!