论坛首页 Web前端技术论坛

关于cssText属性

浏览 4246 次
精华帖 (0) :: 良好帖 (2) :: 新手帖 (7) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-04   最后修改:2010-01-04
CSS

给一个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";

 

 

测试浏览器版本如下(与浏览器模式无关):

IE 6/7
IE 8 (Emulate IE7)

IE 8 (Enforce IE8)
Opera 10.10
Firefox 3.5.6
Safari 4.0.3
Chrome 4.0.266.0



   发表时间:2010-01-20  
说实话,我还没用过css属性,真的很妙,谢谢楼主
0 请登录后投票
   发表时间:2010-07-07  
刚刚学习,正好用上,谢谢lz
0 请登录后投票
   发表时间:2010-07-09   最后修改:2010-07-09
呵呵,这个属性还真不错哦

下次试试看,这功能和JQUERY的CSS属性有点像哦

楼主有空对我的网站测试看看,提点宝贵的意见哦

我的站是http://www.dukai168.cn
0 请登录后投票
   发表时间:2010-07-09  
而且这个不会引起reflow是非常赞成用的方法
0 请登录后投票
   发表时间:2010-07-11  
呵呵,在用,只一次reflow,不错
ff上还有其他方法能达到一样的效果
0 请登录后投票
   发表时间:2010-11-28  
非常方面的属性
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics