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 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery on方法传递参数示例
2014/12/09 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python简单读取大文件的方法
2016/07/01 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
班组长安全职责
2014/01/05 职场文书
2015大学迎新标语
2015/07/16 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL