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为对象原型prototype添加属性的两种方式
Aug 01 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
农历与西历对照
2006/09/06 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript动态加载二
2012/08/22 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python实现划词翻译
2020/04/23 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
公务员的自我鉴定
2013/10/26 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
检讨书怎么写
2015/01/23 职场文书
绿里奇迹观后感
2015/06/15 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android