详解Javascript动态操作CSS


Posted in Javascript onDecember 08, 2014

一、使用js操作css属性的写法

1、对于没有中划线的css属性一般直接使用style.属性名即可。

如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position

2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。

如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等

3、js操作css float属性的特殊写法

因为 float 是javascript的保留字,我们不能直接使用obj.style.float来使用,这样操作是无效的。其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。

二、使用js获取css属性值

1、获取行内Style:obj.style. 属性名。<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div> 不能访问class。

2、获取Class内及Link外部的Css属性:IE中使用的是obj.currentStyle[“属性名”]方法,而FF是用的是getComputedStyle 方法

三、使用js给css属性赋值

1、赋值class属性

赋值:document.getElementById('ceil').className = "class1";

如它有多个值:document.getElementById('ceil').className = "class1 class2 class3";

2、obj.style.cssText设定一个对象的css样式

document.getElementById('navition').style.cssText = "您的CSS代码';

总结

知道如何动态修改页面上所应用的样式,对创建时髦而又富于交互的 Web 页面来说是极其有用的——本文中所阐述的知识构成了诸如 JavaScript 动画之类更高级的技术的基础。需要注意的是,你应当负责任地使用动态样式修改,而且不要过度滥用。如前面所述,样式修改还能提高Web效率——内容的显示和隐藏可以有助于避免在客户端和服务器之间不必要的数据交互。

Javascript 相关文章推荐
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
简单实现js浮动框
Dec 13 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 #Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 #Javascript
Jquery实现由下向上展开效果的例子
Dec 08 #Javascript
Javascript常用字符串判断函数代码分享
Dec 08 #Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 #Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 #Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 #Javascript
You might like
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python群发邮件实例代码
2014/01/03 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python单元测试unittest实例详解
2015/05/11 Python
简单解决Python文件中文编码问题
2015/11/22 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
儿童学习python的一些小技巧
2018/05/27 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
如何撰写促销方案?
2019/07/05 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle