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 获取页面的高度及滚动条的位置的代码
May 06 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 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
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
DOM事件探秘篇
2017/02/15 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python机器学习之KNN分类算法
2018/08/29 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python属性和内建属性实例解析
2020/01/14 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
python 通过exifread读取照片信息
2020/12/24 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
生产部经理岗位职责
2013/12/16 职场文书
会计学生自我鉴定
2014/02/06 职场文书
李培根演讲稿
2014/05/22 职场文书
迎新晚会策划方案
2014/06/13 职场文书
个人自荐书怎么写
2015/03/26 职场文书
政协工作总结2015
2015/05/20 职场文书
2015年中秋寄语
2015/07/31 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Python数据处理的三个实用技巧分享
2022/04/01 Python
宝塔更新Python及Flask项目的部署
2022/04/11 Python