当前位置 : 主页 > 网页制作 > Dojo >

How to show/hide a set of elements?

来源:互联网 收集:自由互联 发布时间:2021-06-15
Question: 根据指定的属性选出一批结点,将它们的父结点隐藏。 dojo已经支持到css3的查询,但遗憾的是,没有父结点选择器(css3不支持父结点选择器),这一点似乎不如jQuery,据称jQue

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上,更改类名字的方法会更快一点。

网友评论