A perfect replica (hopefully) of the jQuery .css() method
testNode.css("color","blue") //use it with two string arguments!
testNode.css({color:"red"}) //use it with an object!
testNode.css("color") //make it return the value of a property
It's even chainable!
Credit to @atk for the great minifiing tips!
| function(a,i,n){for(n in''+a===a||a)this.style[n]=a[n];return i||n?(this.style[a]=i,this):getComputedStyle(this)[a]} |
| function(a,i,n){for(n in''+a===a||a)this.style[n]=a[n];return i||n?(this.style[a]=i,this):getComputedStyle(this)[a]} | |
| //if you want old ie support: | |
| function(a,i,n){for(n in''+a===a||a)this.style[n]=a[n];return i||n?(this.style[a]=i,this):(this.currentStyle||getComputedStyle(this))[a]} | |
| //faster production ready code | |
| Element.prototype.css = function(a,i,n){ | |
| if(i){this.style[a]=i;return this} | |
| if(!i&&typeof a==="object"){for(n in a)this.style[n]=a[n];return this} | |
| return this.style[a]||getComputedStyle(this)[a] | |
| } |
| { | |
| "name": "jQueryCss", | |
| "description": "A replica of the jQuery .css() method", | |
| "keywords": [ | |
| "dom", | |
| "style", | |
| "css", | |
| "jQuery", | |
| "method" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <a>Error!</a> | |
| <script> | |
| Element.prototype.css = function(a,i,n){for(n in''+a===a||a)this.style[n]=a[n];return i||n?(this.style[a]=i,this):getComputedStyle(this)[a]} | |
| testNode = document.getElementsByTagName('a')[0]; | |
| testNode.css("color","blue") | |
| .css({color:"red"}) | |
| testNode.innerHTML=testNode.css("font") //even works with computed styles! | |
| </script> |
@atk
Thanks! Thats a smart bit of code there!
I updated it to get the computed styles as well.
Added IE compatibility (within the 140bytes size limit):
function(a,i,n){for(n in''+a!==a?a:0)this.style[n]=a[n];return n||i?((this.style[a]=i),this):(this.currentStyle||getComputedStyle(this))[a]}
@atk
W00T!
I put it as an alternate.
An annotated version would probably be helpful...
Update: even 1 byte shorter:
function(a,i,n){for(n in''+a!==a&&a)this.style[n]=a[n];return n||i?((this.style[a]=i),this):(this.currentStyle||getComputedStyle(this))[a]}
@atk
Cool!
Save 2 bytes by turning ((this.style[a]=i),this) into (this.style[a]=i,this). See operator precedence.
@maettig
I'm afraid it was already done before you commented.
Shortened string detection using coercion:
''+a===ainstead oftypeof a=='string'Update: even shorter version by using negative string detection and non-parsing of number object 0:
function(a,i,n){for(n in''+a!==a?a:0)this.style[n]=a[n];return n||i?((this.style[a]=i),this):this.style[a]}However, you are aware that this will only get inline styles, not currentStyle (IE) nor getComputedStyle (W3C) informations?