MTJS中的元素显示和隐藏的封装

页面元素的显示和隐藏在前端开发中经常用到的,原来我是这样写的,

[code=”javascript”]

hide: function(el) {
???????el.style.display = “none”;
}
show: function(el) {
??????? el.style.display = “block”;
??? }

[/code]

这里在show函数上就有个问题,如果元素是display:inline话就有问题了,然后我又改成了:

[code=”javascript”]

hide: function(el) {
??????? el.style.display = “none”;
}
show: function(el) {
??????? el.style.display = ” “;
??? }

[/code]

这也是经常看到的一种,但是当用CSS类设置元素的display时,是computedStyle,而不属于style对象,方法display=”只是取消style对象的display值;最后记过查找在《精通javascript》找到了一下方法,

[code=”javascript”]

/**
??? * 隐藏指定的DOM对象
??? * @id hide
??? * @param {String} el DOM对象
??? * @return {none}
??? */
??? hide: function(el) {
??????? el = this.get(el);//获取对象
??var curDisplay=this.getStyle(el,”display”);//获取对象的display属性值,
??if(curDisplay!=”none”){
???el._curDisplay=curDisplay;//增加对象的私有属性_curDisplay用来存放元素隐藏前的display属性值;
??}
??el.style.display = “none”;
??? },
??? /**
??? * 显示指定的DOM对象
??? * @id show
??? * @param {String} el DOM对象
??? * @return {none}
??? */
??? show: function(el) {
??????? el = this.get(el);
??????? el.style.display = el._curDisplay||””; //取对象的display属性值设置成元素隐藏前的display属性值,如果没有就去“”
??? },

[/code]

欢迎大家发表意见和建议!

赞(0) 打赏
未经允许不得转载:WEB前端开发 » MTJS中的元素显示和隐藏的封装

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    码头兄这个问题的确很有实际意义··

    一路彷徨10年前 (2009-08-28)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏