Analysis of implementation defects of floating in css method in jQuery (1.6.3)_jquery

jQuery's css method unifies the two writing methods, and you can directly use the float attribute. Passing the parameter "float" in the following css method can set or get the float of the element.

Copy code The code is as follows:

float div< ;/div>

But jQuery has to be smart, plus support for cssFloat and styleFloat Supported, see API documentation. For example, when obtaining the float attribute of an element, the following are equivalent.
1 $('div.left').css('float');
2 $('div.left').css('cssFloat');
3 $('div.left ').css('styleFloat');
But the return value of method 3 is different in each browser. For example, use styleFloat to get the float

Copy code The code is as follows:

float div

The element div is not floated, so it should return "none" by default . But the result is
IE6/7/8: Returns the empty string "none"
IE9/Firefox/Safari/Chrome/Opera: Returns the empty string
Another example is using cssFloat to set float:

Copy code The code is as follows:

float div

IE6/7/8: Setting failed
IE9/10/Firefox/Safari/Chrome/Opera: Setting successful
Another example is using styleFloat to set float:

Copy code The code is as follows:

float div

IE6/ 7/8/9/10/Opera: The setting was successful (Opera is a weirdo, both styleFloat and cssFloat are supported)
Firefox/Safari/Chrome: The setting was not successful
Therefore, when using the css method to get or set the float, it is To avoid differences between browsers, just use float honestly. Don't use styleFloat or cssFloat.
Of course, if this is a jQuery bug, it is easy to fix.
1. Modify the jQuery.css method and add a styleFloat judgment.

Copy code The code is as follows:

// cssFloat needs a special treatment
if ( name === "cssFloat" || name === "styleFloat") {
name = "float";
}

Use $(xx).css(" styleFloat") there will be no compatibility issues.
2. Modify the jQuery.style method and add a judgment if styleFloat or cssFloat is converted to float

Copy code Code As follows:

// Don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
return;
}
// This is the repair code added
if( name === "cssFloat" || name === "styleFloat" ) {
name = "float"
}
// Make sure that we're working with the right name
var ret, type, origName = jQuery.camelCase( name ),
style = elem .style, hooks = jQuery.cssHooks[ origName ];

Use $(xx).css("cssFloat", "right") or $(xx).css("styleFloat", "right") will be ok in all browsers.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn