详解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 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
提取HTML标签
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
详解Python字符串切片
2019/05/20 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
do you have any Best Practice for testing
2016/06/04 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
材料加工工程求职信
2014/02/19 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
作弊检讨书
2015/01/27 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年副班长工作总结
2015/05/15 职场文书
《确定位置》教学反思
2016/02/18 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书