js中巧用cssText属性批量操作样式


Posted in Javascript onMarch 13, 2011

给一个HTML元素设置css属性,如

var head= document.getElementById("head"); 
head.style.width = "200px"; 
head.style.height = "70px"; 
head.style.display = "block";

这样写太罗嗦了,为了简单些写个工具函数,如
function setStyle(obj,css){ 
for(var atr in css){ 
obj.style[atr] = css[atr]; 
} 
} 
var head= document.getElementById("head"); 
setStyle(head,{width:"200px",height:"70px",display:"block"})

发现 Google API 中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如
var head= document.getElementById("head"); 
head.style.cssText="width:200px;height:70px;display:bolck";

和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能。

但cssText也有个缺点,会覆盖之前的样式。如

<div style="color:red;">TEST</div>

想给该div在添加个css属性width
div.style.cssText = "width:200px;";

这时虽然width应用上了,但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。
function setStyle(el, strCss){ 
var sty = el.style; 
sty.cssText = sty.cssText + strCss; 
}

使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8中cssText返回值少了分号 会让你失望。

因此对IE6/7/8还需单独处理下,如果cssText返回值没";"则补上

function setStyle(el, strCss){ 
function endsWith(str, suffix) { 
var l = str.length - suffix.length; 
return l >= 0 && str.indexOf(suffix, l) == l; 
} 
var sty = el.style, 
cssText = sty.cssText; 
if(!endsWith(cssText, ';')){ 
cssText += ';'; 
} 
sty.cssText = cssText + strCss; 
}

相关:
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSSStyleDeclaration

Javascript 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
面包屑导航详解
Dec 07 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
js中获取事件对象的方法小结
Mar 13 #Javascript
js中关于new Object时传参的一些细节分析
Mar 13 #Javascript
重载toString实现JS HashMap分析
Mar 13 #Javascript
JavaScript获取页面上某个元素的代码
Mar 13 #Javascript
jQuery hover 延时器实现代码
Mar 12 #Javascript
js中if语句的几种优化代码写法
Mar 12 #Javascript
鼠标事件延时切换插件
Mar 12 #Javascript
You might like
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php解析url的三个示例
2014/01/20 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python聚类算法之基本K均值实例详解
2015/11/20 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
PHP面试题集
2016/12/18 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
实习自我鉴定范文
2013/10/30 职场文书
学生会干部自荐信
2014/02/04 职场文书
村党支部书记承诺书
2014/05/29 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
上课不认真检讨书
2014/09/17 职场文书
谢师宴学生致辞
2015/07/27 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书