Skip to content

Loading…

Bug 7345; Add support for explicit/relative string values in .css - modif #297

Merged
merged 2 commits into from

2 participants

@danheberden
jQuery Foundation member

Bug 7345; Add support for explicit/relative string values in .css - modified from original pull req by brandonaron #78 - #78

Checks for an equals sign to add/substract values - otherwise, reduces string to +digit or -digit to use.

@danheberden danheberden closed this
@danheberden danheberden reopened this
@danheberden
jQuery Foundation member

I opted for the inline testing/filtering of regex vs storing the array as in pull #78 due to the fact taht it was 3-7x faster: http://danheberden.com/share/0d501.png and http://jsperf.com/dh-regex-array-vs-parsing -

danheberden@44a3b58 ( which is part of this branch ) has the refactored code, improved regex and rewritten test cases.

@dmethvin dmethvin merged commit 44a3b58 into jquery:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Showing with 44 additions and 3 deletions.
  1. +12 −3 src/css.js
  2. +32 −0 test/unit/css.js
View
15 src/css.js
@@ -7,6 +7,8 @@ var ralpha = /alpha\([^)]*\)/i,
rupper = /([A-Z]|^ms)/g,
rnumpx = /^-?\d+(?:px)?$/i,
rnum = /^-?\d/,
+ rrelNum = /^[+\-]=/,
+ rrelNumFilter = /[^+\-\.\de]+/g,
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
cssWidth = [ "Left", "Right" ],
@@ -75,20 +77,27 @@ jQuery.extend({
}
// Make sure that we're working with the right name
- var ret, origName = jQuery.camelCase( name ),
+ var ret, type, origName = jQuery.camelCase( name ),
style = elem.style, hooks = jQuery.cssHooks[ origName ];
name = jQuery.cssProps[ origName ] || origName;
// Check if we're setting a value
if ( value !== undefined ) {
+ type = typeof value;
+
// Make sure that NaN and null values aren't set. See: #7116
- if ( typeof value === "number" && isNaN( value ) || value == null ) {
+ if ( type === "number" && isNaN( value ) || value == null ) {
return;
}
+ // convert relative number strings (+= or -=) to relative numbers. #7345
+ if ( type === "string" && rrelNum.test( value ) ) {
+ value = +value.replace( rrelNumFilter, '' ) + parseFloat( jQuery.css( elem, name ) );
+ }
+
// If a number was passed in, add 'px' to the (except for certain CSS properties)
- if ( typeof value === "number" && !jQuery.cssNumber[ origName ] ) {
+ if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
value += "px";
}
View
32 test/unit/css.js
@@ -105,6 +105,38 @@ test("css(String|Hash)", function() {
equals( child[0].style.fontSize, old, "Make sure font-size isn't changed on null." );
});
+test("css() explicit and relative values", function() {
+ expect(9);
+ var $elem = jQuery('#nothiddendiv');
+
+ $elem.css({ width: 1, height: 1 });
+ equals( $elem.width(), 1, "Initial css set or width/height works (hash)" );
+
+ $elem.css({ width: "+=9" });
+ equals( $elem.width(), 10, "'+=9' on width (hash)" );
+
+ $elem.css({ width: "-=9" });
+ equals( $elem.width(), 1, "'-=9' on width (hash)" );
+
+ $elem.css({ width: "+=9px" });
+ equals( $elem.width(), 10, "'+=9px' on width (hash)" );
+
+ $elem.css({ width: "-=9px" });
+ equals( $elem.width(), 1, "'-=9px' on width (hash)" );
+
+ $elem.css( "width", "+=9" );
+ equals( $elem.width(), 10, "'+=9' on width (params)" );
+
+ $elem.css( "width", "-=9" ) ;
+ equals( $elem.width(), 1, "'-=9' on width (params)" );
+
+ $elem.css( "width", "+=9px" );
+ equals( $elem.width(), 10, "'+=9px' on width (params)" );
+
+ $elem.css( "width", "-=9px" );
+ equals( $elem.width(), 1, "'-=9px' on width (params)" );
+});
+
test("css(String, Object)", function() {
expect(22);
Something went wrong with that request. Please try again.