jquery's CSS method unifies two kinds of writing, uses the float attribute directly, the following CSS method passes the parameter "float" to be able to set up also can obtain the element float.
Copy Code code as follows:
<div id= "D1" >float div</div>
<script type= "Text/javascript" >
$ (' #d1 '). css (' float ', ' right ');
var str = $ (' #d1 '). css (' float ');
alert (str);
</script>
But jquery has to be smart, plus support for cssfloat and stylefloat, see API documentation, like getting the float property of an element, the following is equivalent.
1 $ (' Div.left '). css (' float ');
2 $ (' Div.left '). CSS (' cssfloat ');
3 $ (' Div.left '). CSS (' stylefloat ');
But mode 3 returns different values in each browser, such as using stylefloat to get floating
Copy Code code as follows:
<div id= "D1" >float div</div>
<script type= "Text/javascript" >
Alert ($ (' #d1 '). CSS (' stylefloat ');
</script>
The element div does not have a float set, so the default should return ' None '. But the result is
IE6/7/8: Returns the empty string "None"
Ie9/firefox/safari/chrome/opera: Returns an empty string
Also, use Cssfloat to set the float:
Copy Code code as follows:
<div id= "D1" >float div</div>
<script type= "Text/javascript" >
$ (' #d1 '). CSS (' cssfloat ', ' right ');
</script>
IE6/7/8: Setup was unsuccessful
Ie9/10/firefox/safari/chrome/opera: Set Success
Also, use stylefloat to set the float:
Copy Code code as follows:
<div id= "D1" >float div</div>
<script type= "Text/javascript" >
$ (' #d1 '). CSS (' stylefloat ', ' right ');
</script>
Ie6/7/8/9/10/opera: Set Success (Opera is a freak, stylefloat and cssfloat support)
Firefox/safari/chrome: Setup is unsuccessful
Therefore, use a CSS method to get or set floats to avoid differences between browsers or to use float. Do not use stylefloat or cssfloat.
Of course, if this is a jquery bug, then fixing is easy too.
1, modify the Jquery.css method, add a stylefloat judgment.
Copy Code code as follows:
Cssfloat needs a special treatment
if (name = = = "Cssfloat" | | | name = = = "Stylefloat") {
name = "float";
}
This uses $ (xx). CSS ("stylefloat") there is no compatibility problem.
2, modify the Jquery.style method, add a judgment if Stylefloat or cssfloat are 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 plus fix code.
if (name = = = "Cssfloat" | | | name = = = "Stylefloat") {
name = "Float"
}
Make sure so we ' re working with the right name
VAR ret, type, OrigName = jquery.camelcase (name),
style = Elem.style, hooks = jquery.csshooks[OrigName];
This uses $ (xx). CSS ("Cssfloat", "right") or $ (xx). CSS ("stylefloat", "right") each browser is OK.
