您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

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

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

  以下为引用的内容:

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

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

  以下为引用的内容:

  hide: function(el) {
          el.style.display = "none";
  }
  show: function(el) {
          el.style.display = " ";
      }

  这也是经常看到的一种,但是当用CSS类设置元素的display时,是computedStyle,而不属于style对象,方法display=”只是取消style对象的display值;最后记过查找在《精通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属性值,如果没有就去“”
      },

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