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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 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源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
python:接口间数据传递与调用方法
2018/12/17 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
婚前协议书范本
2014/10/27 职场文书
英文感谢信格式
2015/01/21 职场文书
西柏坡观后感
2015/06/08 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
7个关于Python的经典基础案例
2021/11/07 Python