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
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 );
}
});

124
src/css.js
View file

@ -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;
}
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 {
jQuery.swap( elem, cssShow, function() {
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 ( value !== undefined ) {
if ( typeof value === "number" && !rexclude.test(name) ) {
value += "px";
}
if ( !("set" in hooks) || (value = hooks.set( elem, value )) === false ) {
style[ name ] = value;
}
} else {
if ( "get" in hooks && (ret = hooks.get( elem, force, extra )) !== false ) {
return ret;
}
if ( !force && name in style ) {
ret = style[ name ];
} 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 ) {

4
src/dimensions.js
View file

@ -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;
};

14
src/effects.js vendored
View file

@ -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 ) {

24
src/offset.js
View file

@ -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 = "<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" } );
@ -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 {