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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
jquery常用操作小结
Jul 21 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
vue-model实现简易计算器
Aug 17 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
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python实现的tab文件操作类分享
2014/11/20 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python使用knn实现特征向量分类
2018/12/26 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
python和go语言的区别是什么
2020/07/20 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
毕业生自荐信
2013/12/14 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
预备党员的自我评价
2014/03/12 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Java实现带图形界面的聊天程序
2022/06/10 Java/Android