调用JavaScript控制CSS的float属性-css cursor属性

CSS中float属性有很多值得学习的地方，本文和大家重点讨论一下如何使用JavaScript控制CSS的float属性，相信本文介绍一定会让你有所收获。

用JavaScript控制CSS的float属性

　　今天学习JavaScript控制CSS的float属性时发现的一个兼容性问题，在Aptana没有代码提示，用VisualStudio2008也没有代码提示，不知道是不是因为这个属性在不同的浏览器中不能兼容还是它们都有Bug。先看一下我写的DEMO吧。

ExampleSourceCode

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>测试了</title> 
 
<scripttypescripttype="text/javascript"> 
functiondivFloatRight(e){  
e.style.backgroundColor="#ff0000";  
e.style.styleFloat="right";//IE  
e.style.cssFloat="right";//firefoxandothersexplorer  
}  
functiondivFloatLeft(e){  
e.style.backgroundColor="transparent";  
e.style.styleFloat="left";  
e.style.cssFloat="left";  
}  
</script> 
 
</head> 
<body> 
<div> 
<dividdivid="demo"style="border:dashed1px#000000;"onmousemove="divFloatRight(this);" 
onclick="divFloatLeft(this);"> 
//JavaScript控制div的float属性，onmousemove~float:right,onclick~float:left。  
</div> 
</div> 
</body> 
</html> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

　　在这里，IE只能支持obj.style.styleFloat，而Firefox和其它的浏览器只支持obj.style.cssFloat。为了解决这个浏览器兼容问题，一开始小题大作的打算写一个浏览器判断的方法，后来反过来一想，只要把这两个属性设置的语句写在一起就可以兼容各个浏览器了。
文章来源:Div-Css.net设计网参考:http://www.div-css.net/div_css/topic/?id=6891

【编辑推荐】