How to show/hide a set of elements?

最新推荐文章于 2022-12-24 09:38:46 发布

原创最新推荐文章于 2022-12-24 09:38:46 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #jquery #css #function #query #class

Web开发同时被 3 个专栏收录

28 篇文章

订阅专栏

Javascript

20 篇文章

订阅专栏

dojo

13 篇文章

订阅专栏

本文介绍了一种利用Dojo框架实现节点隐藏的技术方案，并详细解释了如何通过修改CSS类来达到隐藏的效果，同时提供了如何取消隐藏的方法。

Question:

根据指定的属性选出一批结点，将它们的父结点隐藏。

dojo已经支持到css3的查询，但遗憾的是，没有父结点选择器（css3不支持父结点选择器），这一点似乎不如jQuery，据称jQuery是可以支持父结点选择的。不过这也不是什么太难的事：

var queryString = "";// The CSS query string
dojo.query(queryString).map(function(node){
    return node.parentNode;
}).style({display:'none'});

并不比jQuery来得复杂。

但是这个方案有一个问题，万一后面要回滚这个操作，怎么办？上述方案没有保存原来结点的display属性，因此也就不可能回滚回去。

如果使用visibility属性呢？它有两个取值，hidden和visible。看上去能很好地支持隐藏及显示，但试验一下，你会发现它最大的问题就是，当你隐藏一个元素时，它仍然在文档中占着位置！而多数情况下，当你想要隐藏一个结点时，总会希望藏得严严实实，不漏一丝痕迹--换用工程师的话来讲，它看上去就应该象是从来不存在，从文档中删除掉一样。

上面的话给出了一点提示。css中：position:absolute所起的作用，就正是可以将结点从它当前所处的文档位置中删除掉。但是直接修改position也是不行的，效果会跟直接修改display一样。

真正的解决方案是将要修改的属性包装在class中，再将这个class赋予这些结点。

   1:  .hideMe {

   2:      position : absolute;

   3:      top: -10000px;

   4:      display:none;

   5:      visibility:hidden;

   6:  }

为确保一定能隐藏这些元素，hideMe真是不遗余力。这样做是为了尽可能避免单一属生因竞争不过定义在其它class的属性而失效。现在，再次使用dojo：

var queryString = "";// The CSS query string
dojo.query(queryString).map(function(node){
    return node.parentNode;
}).addClass('hideMe');

当需要将隐藏的元素重新显示出来时，很简单，使用dojo.removeClass：

var queryString = "";// The CSS query string
dojo.query(queryString).map(function(node){
    return node.parentNode;
}).removeClass('hideMe');

Dojo的开发人员曾经谈起过他们的API的风格设计是由专门的人来负责的，如何命名，归到什么样的package或者名字空间下会使得使用者易记、易懂、易用。从NodeList和上面提及的几个API来看的确做到了这一点。

最后，这篇文章Benchmark - Style vs className 提到一个非常有意思的话题：通过something.style.xx=‘attr'或者直接更改类名字，让CSS来生成元素的风格，谁更快？结论可能更有意思--除了在opera上，更改类名字的方法会更快一点。