Question

I’m trying to create a small Javascript ‘framework’ that I can use in my greasemonkey scripts. I only need very basic functions, so this is why I choose not to use mooTools or DOMAssistant. Besides, I’m not going to be silly and put DOMAssitant in a 20KB Greasemonkey script! I just want a small, neat snippet of code.

I have a small problem with the below code. I think its because I am returning an array in $() so I get .setStyle is not a function error message.

 var fmini = {     $ : function(a) {     var i=0,obj,d;     var e = [];      while (obj = arguments[i++]) {       d = document.getElementById(obj);       d.setStyle = fmini.setStyle;       d.each = fmini.each;       e.push(d);     }      return e;   },   setStyle : function(style, value) {     if (typeof this.style.cssText !== 'undefined') {       var styleToSet = this.style.cssText;       if (typeof style === 'object') {         for (var i in style)            if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];       }       else styleToSet += ';' + style + ':' + value;       this.style.cssText = styleToSet;     }     return this;   },   each : function (functionCall) {                 for (var i=0, il=this.length; i < il; i++)                      functionCall.call(this[i]);                 return this;     }, } window.$ = fmini.$; 

I would like this to work when I do

   $('bob','amy').setStyle({     'border' : '5px solid #ff0000',     'background-color' : '#ccc'     }); 

Answer 1

Write your methods to operate on the set of nodes returned from $. That way both $('bob').setStyle() and $('bob', 'amy').setStyle() will work. I see you have a generic forEach or each method which is a good start.

var fmini = {     $: function() {         var i=0, obj;         var e = [];         e.setStyle = fmini.setStyle;         e.each = fmini.each;          while (obj = arguments[i++]) {             e.push(document.getElementById(obj));         }          return e;     },      setStyle : function(style, value) {         return this.each(function() {             if (typeof this.style.cssText !== 'undefined') {                 var styleToSet = this.style.cssText;                 if (typeof style === 'object') {                     for (var i in style)                          if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];                 }                 else styleToSet += ';' + style + ':' + value;                 this.style.cssText = styleToSet;             }         })     } } 

Incidentally this is something jQuery was the first to do/popularze.