用cssText批量修改样式


Posted in Javascript onAugust 29, 2009
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="样式";
上面的代码我们可以修改成:感谢sliuqin的在留言中的斧正
element.style.cssText("width:20px;height:20px;border:solid 1px red;")
下面是是正确的
element.style.cssText="width:20px;height:20px;border:solid 1px red;";

这样就可以尽量避免页面reflow,提高页面性能。
Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
React实现评论的添加和删除
Oct 20 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 #Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 #Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 #Javascript
用户注册常用javascript代码
Aug 29 #Javascript
csdn 博客中实现运行代码功能实现
Aug 29 #Javascript
js 分栏效果实现代码
Aug 29 #Javascript
javascript 简练的几个函数
Aug 29 #Javascript
You might like
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
犀利的js 函数集合
2009/06/11 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
2013/10/24 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
阿里旅行:飞猪
2017/01/05 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
党员一句话承诺大全
2014/03/28 职场文书
婚纱店策划方案
2014/05/22 职场文书
英语教育专业自荐信
2014/05/29 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python