javascript改变样式（cssFloat,styleFloat）

最新推荐文章于 2023-09-22 15:53:31 发布

转载最新推荐文章于 2023-09-22 15:53:31 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/MissBean/p/jsFloat.html

文章标签：

#javascript #ViewUI

本文介绍使用JavaScript设置元素浮动属性的方法，包括不同浏览器间的兼容性处理。详细解释了如何针对IE和其他浏览器（如Firefox）正确地修改元素的float属性。

昨天遇到一用js改变元素浮动的，当时直接写了 obj.style.float="left";结果没起作用；查了资料后才发现不能这样写，现在整理下几种样式写法

1，直接写css属性的，如：obj.style.height/width/color/position等

2，要改大写的，如：obj.style.fontSize/marginLeft/backgroundColor等

3，float，此属性在IE中用obj.style.styleFloat="left";

　　　　　　　　在ff等其他浏览器中用obj.style.cssFloat="left";

第三中兼容性写法：obj.style['cssFloat' in obj.style?'cssFloat':'styleFloat']='left'；具体例子如下

 1 <style type="text/css">
 2     #content{
 3         width: 1000px;
 4         margin: 0 auto;
 5         background: #66c;
 6         overflow: hidden;
 7     }
 8     #left{
 9         width: 200px;
10         height: 50px;
11         background: #c66;
12         color: #fff;
13     }
14 </style>

1  　　<div id="content">
2         <div id="left">left</div>
3         <div id="main">main</div>
4     </div>

1     <script type="text/javascript">
2     　　var oLeft=document.getElementById('left');
3     　　oLeft.style['cssFloat' in oLeft.style?'cssFloat':'styleFloat']='left';
4     </script>