您当前的位置: 首页 » HTML/XHTML/XML编程 » MTJS中的元素显示和隐藏的封装
MTJS中的元素显示和隐藏的封装
论坛链接
页面元素的显示和隐藏在前端开发中经常用到的，原来我是这样写的，
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属性值，如果没有就去“”
},
欢迎大家发表意见和建议！
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属性值，如果没有就去“”
},
欢迎大家发表意见和建议！