Bug Tracker

#3007 closed bug (fixed)

Opened June 09, 2008 10:48AM UTC

Closed March 18, 2009 05:31PM UTC

Last modified March 14, 2012 04:42PM UTC

$.css( cssLikeName ) doesn't return same value than $.css( propertyLikeName )

Reported by: shazam Owned by:
Priority: minor Milestone: 1.3
Component: core Version: 1.2.6
Keywords: Cc:
Blocked by: Blocking:
Description

Sample :

<html>
<head>
	<title>.css dysfunction</title>
	<style>
		* { font-family:verdana; line-height:150%; }
		label { border:1px solid red; padding:3px; margin:2px; width:50px }
		div { border:1px solid green; }		
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			$('#p').text($('div').css('marginLeft'));
			$('#c').text($('div').css('margin-left'));
		});
	</script>
</head>
<body>
	<div style='margin-left:5cm'>Div having a '5cm' left margin in 'style' attribute</div>
	$('div).css('marginLeft') = <label id='p'></label>
	<br/>
	$('div).css('margin-left') = <label id='c'></label>
</body>
</html>

 $('div).css('marginLeft')

returns '5cm'

 $('div).css('margin-left')

returns '189px' on my screen

I think that the $.curCss function should try propertyLikeName (equiv. to camelCased name in this case marginLeft) on elem.style before dealing with runtimeStyle or computedStyle.

I also don't understand why jQuery converts the css value to pixels in the curCss function (Dean Edwards hack).

so, I rewrote the $.curCss function like this :

	curCSS: function( elem, name, force ) {
		var ret, style = elem.style, 
			// css like name
			cName=name.replace( /([A-Z])/g, "-$1" ).toLowerCase(), 
			// property like name
			pName=name.replace(/\\-(\\w)/g, function(all, letter){ return letter.toUpperCase();	});

		// A helper method for determining if an element's values are broken
		function color( elem ) {
			if ( !jQuery.browser.safari )
				return false;

			// defaultView is cached
			var ret = defaultView.getComputedStyle( elem, null );
			return !ret || ret.getPropertyValue("color") == "";
		}

		// We need to handle opacity special in IE
		if ( cName == "opacity" && jQuery.browser.msie ) {
			ret = jQuery.attr( style, "opacity" );

			return ret == "" ?
				"1" :
				ret;
		}
		// Opera sometimes will give the wrong display answer, this fixes it, see #2037
		if ( jQuery.browser.opera && cName == "display" ) {
			var save = style.outline;
			style.outline = "0 solid black";
			style.outline = save;
		}

		// Make sure we're using the right name for getting the float value
		if ( pName.match( /float/i ) )
			pName = styleFloat;

		if ( !force && style && style[ pName ] )
			ret = style[ pName ];

		else if ( defaultView.getComputedStyle ) {

			var computedStyle = defaultView.getComputedStyle( elem, null );

			if ( computedStyle && !color( elem ) )
				ret = computedStyle.getPropertyValue( cName );

			// If the element isn't reporting its values properly in Safari
			// then some display: none elements are involved
			else {
				var swap = [], stack = [], a = elem, i = 0;

				// Locate all of the parent display: none elements
				for ( ; a && color(a); a = a.parentNode )
					stack.unshift(a);

				// Go through and make them visible, but in reverse
				// (It would be better if we knew the exact display type that they had)
				for ( ; i < stack.length; i++ )
					if ( color( stack[ i ] ) ) {
						swap[ i ] = stack[ i ].style.display;
						stack[ i ].style.display = "block";
					}

				// Since we flip the display style, we have to handle that
				// one special, otherwise get the value
				ret = cName == "display" && swap[ stack.length - 1 ] != null ?
					"none" :
					( computedStyle && computedStyle.getPropertyValue( cName ) ) || "";

				// Finally, revert the display styles back
				for ( i = 0; i < swap.length; i++ )
					if ( swap[ i ] != null )
						stack[ i ].style.display = swap[ i ];
			}

			// We should always get a number back from opacity
			if ( cName == "opacity" && ret == "" )
				ret = "1";

		} else if ( elem.currentStyle ) 
			ret = elem.currentStyle[ pName ];

		return ret;
	},
Attachments (1)
Change History (1)

Changed March 18, 2009 05:31PM UTC by brandon comment:1

resolution: → fixed
status: new → closed

jQuery 1.3.x converts css names to camelcase