用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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 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自定义函数返回多个值
2006/11/26 PHP
php的ajax简单实例
2014/02/27 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
jquery插件jSignature实现手动签名
2015/05/04 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Django的分页器实例(paginator)
2017/12/01 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python中几种自动微分库解析
2019/08/29 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
超市活动计划书
2014/04/24 职场文书
义和团口号
2014/06/17 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《西门豹》教学反思
2016/02/23 职场文书