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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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 Directory 函数的详解
2013/03/07 PHP
php字符串截取函数用法分析
2014/11/25 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
关于this和self的使用说明
2010/08/01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
考试退步检讨书
2014/01/15 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
工程质量月活动方案
2014/02/19 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2014年管理工作总结
2014/11/22 职场文书
毕业班工作总结
2015/08/10 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书