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 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
应届生新闻编辑求职信
2013/11/19 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
安全生产活动月方案
2014/03/09 职场文书
初中生操行评语大全
2014/04/24 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
Python可视化神器pyecharts绘制水球图
2022/07/07 Python