职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 352|回复: 6

关于cssText属性

[复制链接]
broken 发表于 2011-7-25 09:36 | 显示全部楼层 |阅读模式
给一个html元素设置css属性,如:

Js代码  
var head= document.getElementById("head");   
head.style.width = "200px";   
head.style.height = "70px";   
head.style.display = "block";  

var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";  
这样写太罗嗦了,为了简单些写个工具函数,如:

Js代码  
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"})  

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属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如下:

Js代码  
var head= document.getElementById("head");   
head.style.cssText="width:200px;height:70px;display:bolck";  

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







秋秋 发表于 2011-7-25 09:36 | 显示全部楼层
说实话,我还没用过css属性,真的很妙,谢谢楼主

找不到我 发表于 2011-7-25 09:36 | 显示全部楼层
刚刚学习,正好用上,谢谢lz

Jethro 发表于 2011-7-25 09:37 | 显示全部楼层
呵呵,这个属性还真不错哦

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

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

我的站是http://www.dukai168.cn

能文能武 发表于 2011-7-25 09:37 | 显示全部楼层
而且这个不会引起reflow是非常赞成用的方法

fl 发表于 2011-7-25 09:37 | 显示全部楼层
呵呵,在用,只一次reflow,不错
ff上还有其他方法能达到一样的效果

feiguo 发表于 2011-7-25 09:37 | 显示全部楼层
非常方面的属性


您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-26 18:40 , Processed in 0.136997 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表