用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脚本代码跑起来。
Jan 09 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
详解ES6中class的实现原理
Oct 03 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
Maps Javascript
2007/01/22 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
javascript常用的设计模式
2017/02/09 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
让python json encode datetime类型
2010/12/28 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python实现猜拳小游戏
2020/04/05 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python多维数组分位数的求取方式
2020/03/03 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
公司爱心捐款倡议书
2014/05/14 职场文书
校园演讲稿汇总
2014/05/21 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
python异步的ASGI与Fast Api实现
2021/07/16 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL