deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

First pass at unifying the various CSS methods in jQuery (jQuery.style, jQuery.curCSS, and jQuery.css are now all under jQuery.css).

Browse source
This commit is contained in:
John Resig 2010-09-05 10:17:18 -04:00
parent 2912f8ab95
commit 920099b29c
5 changed files with 71 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/attributes.js
View file

@ -339,9 +339,5 @@ jQuery.extend({
// Non-existent attributes return null, we normalize to undefined // Non-existent attributes return null, we normalize to undefined
return attr === null ? undefined : attr; 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 );
} }
}); });

102
src/css.js
View file

@ -23,83 +23,39 @@ var rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
jQuery.fn.css = function( name, value ) { jQuery.fn.css = function( name, value ) {
return jQuery.access( this, name, value, true, function( elem, name, value ) { return jQuery.access( this, name, value, true, function( elem, name, value ) {
if ( value === undefined ) { jQuery.css( elem, name, value );
return jQuery.curCSS( elem, name );
}
if ( typeof value === "number" && !rexclude.test(name) ) {
value += "px";
}
jQuery.style( elem, name, value );
}); });
}; };
jQuery.extend({ jQuery.extend({
cssHooks: {}, cssHooks: {},
style: function( elem, name, value ) { css: function( elem, name, value, force, extra ) {
// don't set styles on text and comment nodes // don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) { if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
return undefined; 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 // Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) { if ( rfloat.test( name ) ) {
name = styleFloat; name = styleFloat;
} }
name = name.replace(rdashAlpha, fcamelCase); name = name.replace( rdashAlpha, fcamelCase );
var hooks = jQuery.cssHooks[name] || {}; var ret, style = elem.style || {}, hooks = jQuery.cssHooks[name] || {};
if ( set && (!("set" in hooks) || hooks.set( elem, value ) === false) ) { if ( value !== undefined ) {
if ( typeof value === "number" && !rexclude.test(name) ) {
value += "px";
}
if ( !("set" in hooks) || (value = hooks.set( elem, value )) === false ) {
style[ name ] = value; style[ name ] = value;
} }
if ( "get" in hooks ) {
var cssHookReturn = hooks.get( elem, false );
if ( cssHookReturn !== false ) {
return cssHookReturn;
}
}
return style[ name ];
},
css: function( elem, name, force, extra ) {
if ( name === "width" || name === "height" ) {
if ( elem.offsetWidth !== 0 ) {
val = getWH( elem, name, extra );
} else { } else {
jQuery.swap( elem, cssShow, function() { if ( "get" in hooks && (ret = hooks.get( elem, force, extra )) !== false ) {
val = getWH( elem, name, extra );
});
}
return Math.max(0, Math.round(val));
}
return jQuery.curCSS( elem, name, force );
},
curCSS: function( elem, name, force ) {
var ret, style = elem.style || {}, hooks = jQuery.cssHooks[name] || {};
// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}
if ( "get" in hooks && (ret = hooks.get( elem, force )) !== false ) {
return ret; return ret;
} }
@ -111,6 +67,7 @@ jQuery.extend({
} }
return ret; return ret;
}
}, },
// A method for quickly swapping in/out CSS properties to get correct calculations // 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 ) { if ( !jQuery.support.opacity ) {
jQuery.cssHooks.opacity = { jQuery.cssHooks.opacity = {
get: function( elem, force ) { get: function( elem, force ) {
@ -153,7 +130,7 @@ if ( !jQuery.support.opacity ) {
"" : "" :
"alpha(opacity=" + value * 100 + ")"; "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) ? style.filter = ralpha.test(filter) ?
filter.replace(ralpha, opacity) : filter.replace(ralpha, opacity) :
@ -191,8 +168,7 @@ if ( getComputedStyle ) {
} else if ( document.documentElement.currentStyle ) { } else if ( document.documentElement.currentStyle ) {
curCSS = function( elem, name ) { curCSS = function( elem, name ) {
var left, rsLeft, camelCase = name.replace(rdashAlpha, fcamelCase), var left, rsLeft, ret = elem.currentStyle[ name ];
ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
// From the awesome hack by Dean Edwards // From the awesome hack by Dean Edwards
// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 // 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 // Put in the new values to get a computed value out
elem.runtimeStyle.left = elem.currentStyle.left; elem.runtimeStyle.left = elem.currentStyle.left;
style.left = camelCase === "fontSize" ? "1em" : (ret || 0); style.left = name === "fontSize" ? "1em" : (ret || 0);
ret = style.pixelLeft + "px"; ret = style.pixelLeft + "px";
// Revert the changed values // Revert the changed values
@ -228,14 +204,14 @@ function getWH( elem, name, extra ) {
jQuery.each( which, function() { jQuery.each( which, function() {
if ( !extra ) { if ( !extra ) {
val -= parseFloat(jQuery.curCSS( elem, "padding" + this, true)) || 0; val -= parseFloat(jQuery.css( elem, "padding" + this, undefined, true)) || 0;
} }
if ( extra === "margin" ) { if ( extra === "margin" ) {
val += parseFloat(jQuery.curCSS( elem, "margin" + this, true)) || 0; val += parseFloat(jQuery.css( elem, "margin" + this, undefined, true)) || 0;
} else { } 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 : true :
width > 0 && height > 0 && !skip ? width > 0 && height > 0 && !skip ?
false : false :
jQuery.curCSS(elem, "display") === "none"; jQuery.css(elem, "display") === "none";
}; };
jQuery.expr.filters.visible = function( elem ) { jQuery.expr.filters.visible = function( elem ) {

4
src/dimensions.js
View file

@ -6,14 +6,14 @@ jQuery.each([ "Height", "Width" ], function( i, name ) {
// innerHeight and innerWidth // innerHeight and innerWidth
jQuery.fn["inner" + name] = function() { jQuery.fn["inner" + name] = function() {
return this[0] ? return this[0] ?
jQuery.css( this[0], type, false, "padding" ) : jQuery.css( this[0], type, undefined, false, "padding" ) :
null; null;
}; };
// outerHeight and outerWidth // outerHeight and outerWidth
jQuery.fn["outer" + name] = function( margin ) { jQuery.fn["outer" + name] = function( margin ) {
return this[0] ? return this[0] ?
jQuery.css( this[0], type, false, margin ? "margin" : "border" ) : jQuery.css( this[0], type, undefined, false, margin ? "margin" : "border" ) :
null; null;
}; };

14
src/effects.js vendored
View file

@ -64,7 +64,7 @@ jQuery.fn.extend({
for ( var i = 0, l = this.length; i < l; i++ ) { for ( var i = 0, l = this.length; i < l; i++ ) {
var old = jQuery.data(this[i], "olddisplay"); var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" ) { 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 ]; return this.elem[ this.prop ];
} }
var r = parseFloat(jQuery.css(this.elem, this.prop, force)); var r = parseFloat(jQuery.css(this.elem, this.prop, undefined, force));
return r && r > -10000 ? r : parseFloat(jQuery.curCSS(this.elem, this.prop)) || 0; return r && r > -10000 ? r : parseFloat(jQuery.css(this.elem, this.prop)) || 0;
}, },
// Start an animation from one number to another // Start an animation from one number to another
@ -342,7 +342,7 @@ jQuery.fx.prototype = {
// Simple 'show' function // Simple 'show' function
show: function() { show: function() {
// Remember where we started, so that we can go back to it later // 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; this.options.show = true;
// Begin the animation // Begin the animation
@ -357,7 +357,7 @@ jQuery.fx.prototype = {
// Simple 'hide' function // Simple 'hide' function
hide: function() { hide: function() {
// Remember where we started, so that we can go back to it later // 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; this.options.hide = true;
// Begin the animation // Begin the animation
@ -403,7 +403,7 @@ jQuery.fx.prototype = {
// Reset the properties, if the item has been hidden or shown // Reset the properties, if the item has been hidden or shown
if ( this.options.hide || this.options.show ) { if ( this.options.hide || this.options.show ) {
for ( var p in this.options.curAnim ) { 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: { step: {
opacity: function( fx ) { opacity: function( fx ) {
jQuery.style(fx.elem, "opacity", fx.now); jQuery.css( fx.elem, "opacity", fx.now );
}, },
_default: function( fx ) { _default: function( fx ) {

20
src/offset.js
View file

@ -103,7 +103,7 @@ if ( "getBoundingClientRect" in document.documentElement ) {
jQuery.offset = { jQuery.offset = {
initialize: function() { 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 = "<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>"; html = "<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";
jQuery.extend( container.style, { position: "absolute", top: 0, left: 0, margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } ); jQuery.extend( container.style, { position: "absolute", top: 0, left: 0, margin: 0, border: 0, width: "1px", height: "1px", visibility: "hidden" } );
@ -142,15 +142,15 @@ jQuery.offset = {
jQuery.offset.initialize(); jQuery.offset.initialize();
if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) { if ( jQuery.offset.doesNotIncludeMarginInBodyOffset ) {
top += parseFloat( jQuery.curCSS(body, "marginTop", true) ) || 0; top += parseFloat( jQuery.css(body, "marginTop", undefined, true) ) || 0;
left += parseFloat( jQuery.curCSS(body, "marginLeft", true) ) || 0; left += parseFloat( jQuery.css(body, "marginLeft", undefined, true) ) || 0;
} }
return { top: top, left: left }; return { top: top, left: left };
}, },
setOffset: function( elem, options, i ) { 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 // set position first, in-case top/left are set even on static elem
if ( position === "static" ) { if ( position === "static" ) {
@ -159,8 +159,8 @@ jQuery.offset = {
var curElem = jQuery( elem ), var curElem = jQuery( elem ),
curOffset = curElem.offset(), curOffset = curElem.offset(),
curCSSTop = jQuery.curCSS( elem, "top", true ), curCSSTop = jQuery.css( elem, "top", undefined, true ),
curCSSLeft = jQuery.curCSS( elem, "left", true ), curCSSLeft = jQuery.css( elem, "left", undefined, true ),
calculatePosition = (position === "absolute" && jQuery.inArray('auto', [curCSSTop, curCSSLeft]) > -1), calculatePosition = (position === "absolute" && jQuery.inArray('auto', [curCSSTop, curCSSLeft]) > -1),
props = {}, curPosition = {}, curTop, curLeft; props = {}, curPosition = {}, curTop, curLeft;
@ -210,12 +210,12 @@ jQuery.fn.extend({
// Subtract element margins // Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft // note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0 // are the same in Safari causing offset.left to incorrectly be 0
offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0; offset.top -= parseFloat( jQuery.css(elem, "marginTop", undefined, true) ) || 0;
offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0; offset.left -= parseFloat( jQuery.css(elem, "marginLeft", undefined, true) ) || 0;
// Add offsetParent borders // Add offsetParent borders
parentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0; parentOffset.top += parseFloat( jQuery.css(offsetParent[0], "borderTopWidth", undefined, true) ) || 0;
parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0; parentOffset.left += parseFloat( jQuery.css(offsetParent[0], "borderLeftWidth", undefined, true) ) || 0;
// Subtract the two offsets // Subtract the two offsets
return { return {