$.style with priority

by Julian

HTML

<div id="someDiv"></div>

CSS

body {
    padding: 10px;
}

#someDiv {
    width: 30px;
    height: 30px;
    background-color: green;
}

JavaScript

$.fn.style = function(property, value, important) {
    console.log("***", this);
    if (value == undefined) {
        var returnValue = this.css(property);
    }
    var cssValue = value;
    if (important) {
        cssValue += " !important";
    }
    return this.css(property, cssValue);
}
    
    
var PriorityString = function() {};
PriorityString.prototype = new String();
PriorityString.getPriority = function() {
    return / !important$/i.test(this);
};
    
    

var div = $('#someDiv');
console.log(div.style('background-color'));
div.style('background-color', 'red');
console.log(div.style('background-color'));
div.style('background-color', 'blue', 'important');
console.log(div.style('background-color'));
console.log(div.style('width'));
// console.log(div.style().getPropertyPriority('color'));