用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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
bootstrap vue.js实现tab效果
Feb 07 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
微信小程序实现授权登录
May 15 Javascript
JS实现提示框跟随鼠标移动
Aug 27 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
PHP漏洞全解(详细介绍)
2012/11/13 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
js+css在交互上的应用
2010/07/18 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
市优秀教师事迹材料
2014/02/05 职场文书
中青班党性分析材料
2014/02/16 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
高一军训口号
2015/12/25 职场文书