From: John Resig Date: Sun, 5 Sep 2010 14:17:18 +0000 (-0400) Subject: First pass at unifying the various CSS methods in jQuery (jQuery.style, jQuery.curCSS... X-Git-Url: http://git.asbjorn.biz/?p=jquery.git;a=commitdiff_plain;h=920099b29c1157b637f918cdc293e1c89e9cd4dc First pass at unifying the various CSS methods in jQuery (jQuery.style, jQuery.curCSS, and jQuery.css are now all under jQuery.css). --- diff --git a/src/attributes.js b/src/attributes.js index 719c368..fecba66 100644 --- a/src/attributes.js +++ b/src/attributes.js @@ -339,9 +339,5 @@ jQuery.extend({ // Non-existent attributes return null, we normalize to undefined return attr === null ? undefined : attr; } - - // elem is actually elem.style ... set the style - // Using attr for specific style information is now deprecated. Use style instead. - return jQuery.style( elem, name, value ); } }); diff --git a/src/css.js b/src/css.js index 5d50d32..cd77ec1 100644 --- a/src/css.js +++ b/src/css.js @@ -23,94 +23,51 @@ var rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i, jQuery.fn.css = function( name, value ) { return jQuery.access( this, name, value, true, function( elem, name, value ) { - if ( value === undefined ) { - return jQuery.curCSS( elem, name ); - } - - if ( typeof value === "number" && !rexclude.test(name) ) { - value += "px"; - } - - jQuery.style( elem, name, value ); + jQuery.css( elem, name, value ); }); }; jQuery.extend({ cssHooks: {}, - style: function( elem, name, value ) { + css: function( elem, name, value, force, extra ) { // don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) { return undefined; } - // ignore negative width and height values #1599 - if ( (name === "width" || name === "height") && parseFloat(value) < 0 ) { - value = undefined; - } - - var style = elem.style || elem, set = value !== undefined; - // Make sure we're using the right name for getting the float value if ( rfloat.test( name ) ) { name = styleFloat; } - name = name.replace(rdashAlpha, fcamelCase); + name = name.replace( rdashAlpha, fcamelCase ); - var hooks = jQuery.cssHooks[name] || {}; - - if ( set && (!("set" in hooks) || hooks.set( elem, value ) === false) ) { - style[ name ] = value; - } + var ret, style = elem.style || {}, hooks = jQuery.cssHooks[name] || {}; - if ( "get" in hooks ) { - var cssHookReturn = hooks.get( elem, false ); - if ( cssHookReturn !== false ) { - return cssHookReturn; + if ( value !== undefined ) { + if ( typeof value === "number" && !rexclude.test(name) ) { + value += "px"; } - } - - return style[ name ]; - }, - css: function( elem, name, force, extra ) { - if ( name === "width" || name === "height" ) { - if ( elem.offsetWidth !== 0 ) { - val = getWH( elem, name, extra ); - - } else { - jQuery.swap( elem, cssShow, function() { - val = getWH( elem, name, extra ); - }); + if ( !("set" in hooks) || (value = hooks.set( elem, value )) === false ) { + style[ name ] = value; } - return Math.max(0, Math.round(val)); - } - - return jQuery.curCSS( elem, name, force ); - }, + } else { + if ( "get" in hooks && (ret = hooks.get( elem, force, extra )) !== false ) { + return ret; + } - curCSS: function( elem, name, force ) { - var ret, style = elem.style || {}, hooks = jQuery.cssHooks[name] || {}; + if ( !force && name in style ) { + ret = style[ name ]; - // Make sure we're using the right name for getting the float value - if ( rfloat.test( name ) ) { - name = styleFloat; - } + } else if ( curCSS ) { + ret = curCSS( elem, name ); + } - if ( "get" in hooks && (ret = hooks.get( elem, force )) !== false ) { return ret; } - - if ( !force && name in style ) { - ret = style[ name ]; - - } else if ( curCSS ) { - ret = curCSS( elem, name ); - } - - return ret; }, // A method for quickly swapping in/out CSS properties to get correct calculations @@ -132,6 +89,26 @@ jQuery.extend({ } }); +jQuery.each(["height", "width"], function( i, name ) { + jQuery.cssHooks[ name ] = { + get: function( elem, force, extra ) { + if ( elem.offsetWidth !== 0 ) { + val = getWH( elem, name, extra ); + + } else { + jQuery.swap( elem, cssShow, function() { + val = getWH( elem, name, extra ); + }); + } + }, + + set: function( elem, value ) { + // ignore negative width and height values #1599 + elem.style[ name ] = Math.max( parseFloat(value), 0 ); + } + }; +}); + if ( !jQuery.support.opacity ) { jQuery.cssHooks.opacity = { get: function( elem, force ) { @@ -153,7 +130,7 @@ if ( !jQuery.support.opacity ) { "" : "alpha(opacity=" + value * 100 + ")"; - var filter = style.filter || jQuery.curCSS( elem, "filter" ) || ""; + var filter = style.filter || jQuery.css( elem, "filter" ) || ""; style.filter = ralpha.test(filter) ? filter.replace(ralpha, opacity) : @@ -191,8 +168,7 @@ if ( getComputedStyle ) { } else if ( document.documentElement.currentStyle ) { curCSS = function( elem, name ) { - var left, rsLeft, camelCase = name.replace(rdashAlpha, fcamelCase), - ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ]; + var left, rsLeft, ret = elem.currentStyle[ name ]; // From the awesome hack by Dean Edwards // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 @@ -206,7 +182,7 @@ if ( getComputedStyle ) { // Put in the new values to get a computed value out elem.runtimeStyle.left = elem.currentStyle.left; - style.left = camelCase === "fontSize" ? "1em" : (ret || 0); + style.left = name === "fontSize" ? "1em" : (ret || 0); ret = style.pixelLeft + "px"; // Revert the changed values @@ -228,14 +204,14 @@ function getWH( elem, name, extra ) { jQuery.each( which, function() { if ( !extra ) { - val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0; + val -= parseFloat(jQuery.css( elem, "padding" + this, undefined, true)) || 0; } if ( extra === "margin" ) { - val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0; + val += parseFloat(jQuery.css( elem, "margin" + this, undefined, true)) || 0; } else { - val -= parseFloat(jQuery.curCSS( elem, "border" + this + "Width", true)) || 0; + val -= parseFloat(jQuery.css( elem, "border" + this + "Width", undefined, true)) || 0; } }); @@ -251,7 +227,7 @@ if ( jQuery.expr && jQuery.expr.filters ) { true : width > 0 && height > 0 && !skip ? false : - jQuery.curCSS(elem, "display") === "none"; + jQuery.css(elem, "display") === "none"; }; jQuery.expr.filters.visible = function( elem ) { diff --git a/src/dimensions.js b/src/dimensions.js index aeaaa78..52fd0f8 100644 --- a/src/dimensions.js +++ b/src/dimensions.js @@ -6,14 +6,14 @@ jQuery.each([ "Height", "Width" ], function( i, name ) { // innerHeight and innerWidth jQuery.fn["inner" + name] = function() { return this[0] ? - jQuery.css( this[0], type, false, "padding" ) : + jQuery.css( this[0], type, undefined, false, "padding" ) : null; }; // outerHeight and outerWidth jQuery.fn["outer" + name] = function( margin ) { return this[0] ? - jQuery.css( this[0], type, false, margin ? "margin" : "border" ) : + jQuery.css( this[0], type, undefined, false, margin ? "margin" : "border" ) : null; }; diff --git a/src/effects.js b/src/effects.js index 40326e2..d31e2e3 100644 --- a/src/effects.js +++ b/src/effects.js @@ -64,7 +64,7 @@ jQuery.fn.extend({ for ( var i = 0, l = this.length; i < l; i++ ) { var old = jQuery.data(this[i], "olddisplay"); if ( !old && old !== "none" ) { - jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display")); + jQuery.data( this[i], "olddisplay", jQuery.css(this[i], "display") ); } } @@ -314,8 +314,8 @@ jQuery.fx.prototype = { return this.elem[ this.prop ]; } - var r = parseFloat(jQuery.css(this.elem, this.prop, force)); - return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0; + var r = parseFloat(jQuery.css(this.elem, this.prop, undefined, force)); + return r && r > -10000 ? r : parseFloat(jQuery.css(this.elem, this.prop)) || 0; }, // Start an animation from one number to another @@ -342,7 +342,7 @@ jQuery.fx.prototype = { // Simple 'show' function show: function() { // Remember where we started, so that we can go back to it later - this.options.orig[this.prop] = jQuery.style( this.elem, this.prop ); + this.options.orig[this.prop] = jQuery.css( this.elem, this.prop ); this.options.show = true; // Begin the animation @@ -357,7 +357,7 @@ jQuery.fx.prototype = { // Simple 'hide' function hide: function() { // Remember where we started, so that we can go back to it later - this.options.orig[this.prop] = jQuery.style( this.elem, this.prop ); + this.options.orig[this.prop] = jQuery.css( this.elem, this.prop ); this.options.hide = true; // Begin the animation @@ -403,7 +403,7 @@ jQuery.fx.prototype = { // Reset the properties, if the item has been hidden or shown if ( this.options.hide || this.options.show ) { for ( var p in this.options.curAnim ) { - jQuery.style(this.elem, p, this.options.orig[p]); + jQuery.css( this.elem, p, this.options.orig[p] ); } } @@ -460,7 +460,7 @@ jQuery.extend( jQuery.fx, { step: { opacity: function( fx ) { - jQuery.style(fx.elem, "opacity", fx.now); + jQuery.css( fx.elem, "opacity", fx.now ); }, _default: function( fx ) { diff --git a/src/offset.js b/src/offset.js index 0ce4c19..bab253b 100644 --- a/src/offset.js +++ b/src/offset.js @@ -103,7 +103,7 @@ if ( "getBoundingClientRect" in document.documentElement ) { jQuery.offset = { initialize: function() { - var body = document.body, container = document.createElement("div"), innerDiv, checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.curCSS(body, "marginTop", true) ) || 0, + var body = document.body, container = document.createElement("div"), innerDiv, checkDiv, table, td, bodyMarginTop = parseFloat( jQuery.css(body, "marginTop", undefined, true) ) || 0, html = "
"; jQuery.extend( container.style, { position: "absolute", top: 0, left: 0, margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } ); @@ -142,25 +142,25 @@ jQuery.offset = { jQuery.offset.initialize(); if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) { - top += parseFloat( jQuery.curCSS(body, "marginTop", true) ) || 0; - left += parseFloat( jQuery.curCSS(body, "marginLeft", true) ) || 0; + top += parseFloat( jQuery.css(body, "marginTop", undefined, true) ) || 0; + left += parseFloat( jQuery.css(body, "marginLeft", undefined, true) ) || 0; } return { top: top, left: left }; }, setOffset: function( elem, options, i ) { - var position = jQuery.curCSS( elem, "position" ); + var position = jQuery.css( elem, "position" ); // set position first, in-case top/left are set even on static elem if ( position === "static" ) { elem.style.position = "relative"; } - var curElem = jQuery( elem ), - curOffset = curElem.offset(), - curCSSTop = jQuery.curCSS( elem, "top", true ), - curCSSLeft = jQuery.curCSS( elem, "left", true ), + var curElem = jQuery( elem ), + curOffset = curElem.offset(), + curCSSTop = jQuery.css( elem, "top", undefined, true ), + curCSSLeft = jQuery.css( elem, "left", undefined, true ), calculatePosition = (position === "absolute" && jQuery.inArray('auto', [curCSSTop, curCSSLeft]) > -1), props = {}, curPosition = {}, curTop, curLeft; @@ -210,12 +210,12 @@ jQuery.fn.extend({ // Subtract element margins // note: when an element has margin: auto the offsetLeft and marginLeft // are the same in Safari causing offset.left to incorrectly be 0 - offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0; - offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0; + offset.top -= parseFloat( jQuery.css(elem, "marginTop", undefined, true) ) || 0; + offset.left -= parseFloat( jQuery.css(elem, "marginLeft", undefined, true) ) || 0; // Add offsetParent borders - parentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0; - parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0; + parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth", undefined, true) ) || 0; + parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth", undefined, true) ) || 0; // Subtract the two offsets return {