javascript改变样式（cssFloat,styleFloat）

昨天遇到一用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>

这样就通过js改变了id为left的float属性

转载于:https://www.cnblogs.com/MissBean/p/jsFloat.html

javascript改变样式（cssFloat,styleFloat）相关推荐

php鼠标已入移除,原生javascript学习：鼠标移入移出改变样式
这是一个简单的例子,先看demo: 源码如下: #box {width:140px; height:140px; margin: auto; background-color:black; color ...
Javascript 改变CSS样式
一.局部改变样式有三种方法:直接改变样式.改变className和改变cssText 改变className: document.getElementById('obj').className=&q ...
JavaScript之改变样式
代码示例: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
摘要腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,201 ...
vue实现触碰改变样式
vue实现触碰改变样式 1.实现效果: 2.实现代码: ps:引入的是我的vue.js的相对地址,如果你的代码的vue引入地址不一样,请不要以为是我的代码出了错. <!DOCTYPE html& ...
JavaScript设置样式
JavaScript设置样式通过JavaScript设置样式 <body><div id="box"></div></body>& ...
JavaScript的样式操作
JavaScript的样式操作样式操作获取内联样式 getAttribute()方法 DOM对象的style属性 CSSStyleDeclaration对象获取外联样式表 Document对象的 ...
JavaScript style 样式
1.首先,我们先进入vs.打开文件夹(文件夹需要提前在桌面上新建好),然后新建一个html文档,改一下title为JavaScript style 样式. 2.我们就先设置一个div,然后style样 ...
【转】使用Javascript改变HTML内容
原文地址:http://www.qeefee.com/js/change-html-used-javascript 更多Javascript教程,欢迎访问起飞网>>Javascript教程 ...

javascript改变样式（cssFloat,styleFloat）

javascript改变样式（cssFloat,styleFloat）相关推荐

最新文章

热门文章