开发学院网页设计JavaScript 使用JavaScript切换DOM元素显示状态的七种方法 阅读

使用JavaScript切换DOM元素显示状态的七种方法

 2010-09-14 13:09:53 来源:WEB开发网   
核心提示:通过JavaScript切换一个元素的显示状态的方法实际上是不可计数的,但在这其中确实有一些非常实用的技巧,使用JavaScript切换DOM元素显示状态的七种方法,追溯到上个世纪90年代后期,切换元素的状态可能是JavaScript开发书籍最早介绍的技巧之一了,这样就可以同时操作更多的元素,这当然没问题!进一步升级的

通过JavaScript切换一个元素的显示状态的方法实际上是不可计数的,但在这其中确实有一些非常实用的技巧。追溯到上个世纪90年代后期,切换元素的状态可能是JavaScript开发书籍最早介绍的技巧之一了。实际上就算在现在,如果能够合理地控制元素的显示和隐藏,同样可以大幅度提高用户的体验。

不管怎样,这里介绍实现这种效果的七种方式。

正文开始

第一种,可能是最简单的,也是大家最常用的方式。

最直接的切换方式// 显示
document.getElementById('element').style.display = '';
// 隐藏
document.getElementById('element').style.display = 'none';

我们把上面的操作包装到函数中,这样使用起来更加快速,比如下面这段代码:

显示还是隐藏?function toggle(obj) {
  var el = document.getElementById(obj);
  if ( el.style.display != 'none' ) {
    el.style.display = 'none';
  }
  else {
    el.style.display = '';
  }
}

这种方式很容易就实现了,但我们可以改进一下,使用三元条件运算符简化代码。

三元风格的切换function toggle(obj) {
  var el = document.getElementById(obj);
  el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

你听过$函数么?如果其他函数没有使用这个名称,我们可以借用一下!

使用$赋予三元风格更多内涵// 我们的美元函数
function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;
    elements.push(element);
  }
  return elements;
}
// 切换函数的升级版
function toggle(obj) {
  var el = $(obj);
  el.style.display = (el.style.display != 'none' ? 'none' : '' );
}

好吧,现在这项工作已经变得很简洁了,但我们可以做的更漂亮么?为什么不呢。我们现在还有个限制,就是只能切换一个对象的状态,让我们突破这个限制。

同时切换多个对象function toggle() {
  for ( var i=0; i < arguments.length; i++ ) {
    $(arguments[i]).style.display = ($(arguments[i]).style.display != 'none' ? 'none' : '' );
  }
}

非常好,现在这段代码看起来已经非常养眼了(个人认为这段是最棒的)。让我们在尝试一下,能不能显式的设置每个对象是显示还是隐藏。

分离显示和隐藏操作var toggle = {
  show : function(obj) {
    document.getElementById(obj).style.display = '';
  },
  hide : function(obj) {
    document.getElementById(obj).style.display = 'none';
  }
};

好吧,问题来了,刚才定义的$函数怎么办呢,我们要把两种方式结合起来。

经过整合的显示和隐藏操作var toggle = {
  show : function(obj) {
    $(obj).style.display = '';
  },
  hide : function(obj) {
    $(obj).style.display = 'none';
  }
};

好吧,我们为什么不在参数的传递上更灵活一些呢,这样就可以同时操作更多的元素,这当然没问题!

进一步升级的分离和显示操作var toggle = {
  show : function() {
    for ( i=0; i < arguments.length; i++ ) {
      $(arguments[i]).style.display = '';
    }
  },
  hide : function() {
    for ( i=0; i < arguments.length; i++ ) {
      $(arguments[i]).style.display = 'none';
    }
  }
};

最后,我们终于实现了最初要求的效果了。

Tags:使用 JavaScript 切换

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接