js css样式操作代码(批量操作)


Posted in Javascript onOctober 09, 2009

我们用js书写css样式通常会用下面的两种方式:

一般情况下我们用js设置元素对象的样式会使用这样的形式:

var element= document.getElementById(”id”); 
element.style.width=”20px”; 
element.style.height=”20px”; 
element.style.border=”solid 1px red”;

但是上面的方法有一个缺点,样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。

js中有一个cssText的方法:
语法为:obj.style.cssText(”样式”);
上面的代码我们可以修改成:

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这种写法可以尽量避免页面的多次reflow,提高页面性能。
Javascript 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
回顾Javascript React基础
Jun 15 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 #Javascript
JavaScript delete 属性的使用
Oct 08 #Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 #Javascript
Javascript isArray 数组类型检测函数
Oct 08 #Javascript
JavaScript 监听textarea中按键事件
Oct 08 #Javascript
jquery 最简单的属性菜单
Oct 08 #Javascript
Javascript 日期处理之时区问题
Oct 08 #Javascript
You might like
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
护士自荐信
2013/10/25 职场文书
个人事迹材料范文
2014/12/29 职场文书
我的中国梦主题班会
2015/08/14 职场文书
银行求职信范文
2019/05/13 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
python控制台打印log输出重复的解决方法
2021/05/14 Python
Python中super().__init__()测试以及理解
2021/12/06 Python