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.
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
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:
IE6/7/8: Setting failed
IE9/10/Firefox/Safari/Chrome/Opera: Setting successful
Another example is using styleFloat to set float:
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.
// 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
// 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.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
