A Pen by Bitcollage.

index.html

<ul>
   <li>jQuery like .css() method :)</li>
   <li>Is that awesome?</li>
   <li>Jep, nice</li>
</ul>

jQuery-like-.css()-method-+-nice-callback-!.markdown

jQuery like .css() method + nice callback !

You dont need jQuery ! Native Javascript are always better :) This works good in: Chrome, Firefox, Safari, IE +9

A Pen by Bitcollage on CodePen.

License.

script.js

    
    // >> queryselector like jQuery
    // >> document.queryselector is much 
    //    more faster: see http://jsperf.com/jquery-2-vs-javascript-selectors-performance-comparison

    var $ = document.querySelectorAll.bind(document);

    // >> start >> please copy this part for using css handle in your project
    var isTypeof = function(type, object){
        return Object.prototype.toString.call(object).toLowerCase() === '[object '+type+']';
    };

    Array.prototype.css =
    NodeList.prototype.css =
    HTMLCollection.prototype.css = function(){
        var res;
        for(var i=0,length=this.length;i<length;i++){
            this[i].css.apply(this[i], arguments);
        }
    }

    HTMLElement.prototype.css = function(){

        var self     = this,
            args     = arguments, 
            res      = null,
            style    = null,
            tmpObj   = {},
            writeCss = function(self, cssObject){
                for(var attr in cssObject){
                    self.style[attr] = cssObject[attr];  
                }
            },
            stylesheetRuleToCamelCase = function(attr){
                if((capital = /-([a-z])/g.exec(attr)) && !(!!window.chrome)){
                    attr = attr.replace(capital[0], capital[1].toUpperCase());
                }
                return attr;
            },
            objectCollectionToCamelCase = function(cssObject){
                var tmpCssObject={}, tmpAttr;
                for(var attr in cssObject) {
                    tmpCssObject[stylesheetRuleToCamelCase(attr)] = cssObject[attr];
                }
                return tmpCssObject;
            };

        // > write operations
        if(isTypeof('string', args[0]) && isTypeof('string', args[1]) && !args[2]){
            tmpObj[args[0]] = args[1]; 
            writeCss(self, objectCollectionToCamelCase(tmpObj)); 
        } else if(isTypeof('object', args[0]) && isTypeof('undefined', args[1])){
            writeCss(self, objectCollectionToCamelCase(args[0])); 
        } else if(args[0] && args[1] && args[2]){
            args[2].call(self, args[0], args[0]);
        } else if(isTypeof('object', args[0]) && isTypeof('function', args[1])){
            args[1].call(self, args[0]);
        }
    
        // > read operations
        if(isTypeof('string', args[0]) && !args[1] && !args[2]){
            style = self.style[stylesheetRuleToCamelCase(args[0])];  
            if(style!==''){
                res = self.style[args[0]];
            }
            else if(style===''){
                res = window.getComputedStyle(self).getPropertyValue(
                    stylesheetRuleToCamelCase(args[0])
                );
            }
        }
        return res;
    };

    // >> end >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    // >>>>>> now we can work with our lightweight css lib
    // >> setter over key, value
    $('ul').css('width', '400px')
    $('ul li').css('background-color', 'blue');
    $('ul li').css('color', 'white');  

    // >> setter over json notation
    $('ul li').css({
        'font-weight' : 'bold',
        'text-decoration' : 'underline',
        'padding' : '5px'
    });

    document.querySelector('ul').css('padding', '20px');
    document.querySelector('ul li').css('font-size', '24px');
    document.querySelector('ul li').css('font-family', 'arial');

    // > setter + callback
    $('ul li').css('color', 'white', function(attribute, value){
         if(this.innerHTML === 'Jep, nice'){
             this.css('background-color', 'green');
             this.innerHTML = this.innerHTML + '! that manupulated over Callback'
         } else {
             this.css(attribute, value);
         } 
    });

    $('ul li').css({color : 'white'}, function(attributes){
         if(this.innerHTML === 'Is that awesome?'){
             var element = document.createElement('div');
             element.innerHTML = 'im appended by callback';
             element.css('font-style', 'italic');
             this.appendChild(element);
         }
    });

    // getter
    console.log($('ul li')[0].css('height'));   // > getter
    console.log($('ul li')[0].css('border-width'));   // > getter