判断html元素是否真正可见的巧妙方法

在Ext中，几乎所有的组件都有isVisible()方法和hidden属性，都是用来判断是否组件元素是否可见，这在ext内部管理来说没有问题，但有时我们把组件放在了自己的html结构内，如果我们把自己编写的html元素通过css定义为隐藏后，使用ext的isVisible方法和hidden属性就不能正确获取到组件是否可见了，因为ext也仅仅是根据判断元素的visibility和display属性来确定元素是否可见的。因此如果本身没有设定隐藏而外层设定了隐藏，则不能通过这两个css属性来判断元素是否可见了。

在实际的应用中，有时还必须需要知道元素的真实的可见性，但此时通过ext的内部方法就不管用了，思考测试许久突然想起了一个元素，当元素不可见时读取其实际高度或宽度则可能返回0，测试发现果然如此。
通过读取其offsetXXX或clientXXX来判断，或者使用Ext的getSize或getComputedWidth/Height方法获取，如果元素在页面不可见则会返回0，根据这点我们就可以获取到元素的真正可见性了。

如我们需要在元素可见时执行一些操作，则可以如下组织代码：

var timer=setInterval(function(){
    if(el.getComputedHeight()>0||el.getComputedWidth()>0){
            //do something
            clearInterval(timer);
    }
},1)

Yemoo'S JS Blog 2008-06-23 13:37 发表评论