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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
node.js express框架简介与实现
Jul 23 Javascript
javascript canvas检测小球碰撞
Apr 17 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript生成大小写字母
2015/07/03 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python批量制作雷达图的实现方法
2016/07/26 Python
window下eclipse安装python插件教程
2017/04/24 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python错误处理操作示例
2018/07/18 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
接口中的方法可以是abstract的吗
2015/07/23 面试题
"序列点" 是什么
2016/07/29 面试题
领班岗位职责范文
2014/02/06 职场文书
作风转变心得体会
2014/09/02 职场文书
心得体会的写法
2014/09/05 职场文书
工作总结与自我评价
2014/09/18 职场文书
创业计划书之面包店
2019/09/17 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技