javascript – 查找所有块元素

我需要找到给定节点中的所有块元素.块元素不仅仅是在CSS中具有display:block的元素,还包括div和p等默认块元素.

我知道我可以获得元素的计算样式并检查显示属性,但是,我的代码将在一个长循环中执行,并且每次计算样式都会刷新reflow堆栈,因此它将非常广泛.

我正在寻找一些没有getComputedStyle的技巧.

编辑

这是我想要改进的当前代码:

var isBlockOrLineBreak = function(node)
{
    if (!node) {
        return false;
    }
    var nodeType = node.nodeType;
    return nodeType == 1 && (!inlineDisplayRegex.test(getComputedStyleProperty(node, "display")) || node.tagName === "BR")
        || nodeType == 9 || nodeType == 11;
};

 另一个编辑

jQuery的.css调用了getComputedStyle.所以这不是我想要的.

 我的解决方案

谢谢大家的建议.不幸的是,它们都不符合我的要求.经过大量的文档挖掘后,我意识到没有getComputedStyle,没有真正的方法可以做到这一点.但是,我想出了尽可能避免getComputedStyle的代码.这是代码:

$.extend($.expr[':'], {
    block: function(a) {
        var tagNames = {
            "ADDRESS": true,"BLOCKQUOTE": true,"CENTER": true,"DIR": true,"DIV": true,
            "DL": true,"FIELDSET": true,"FORM": true,"H1": true,"H2": true,"H3": true,
            "H4": true,"H5": true,"H6": true,"HR": true,"ISINDEX": true,"MENU": true,
            "NOFRAMES": true,"NOSCRIPT": true,"OL": true,"P": true,"PRE": true,"TABLE": true,
            "UL": true,"DD": true,"DT": true,"FRAMESET": true,"LI": true,"TBODY": true,
            "TD": true,"TFOOT": true,"TH": true,"THEAD": true,"TR": true
        };
        return $(a).is(function() {
            if (tagNames[this.tagName.toUpperCase()]) {
                if (this.style.display === "block")
                {
                    return true;
                }
                if (this.style.display !== "" || this.style.float !== "")
                {
                    return false;
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
            else {
                if (this.style.display === "block") {
                    return
                }
                else {
                    return $(this).css("display") === "block";
                }
            }
        });
    }
});

使用此代码非常简单,只需执行$(“:block”)或$(“form:block”).这将避免在很多情况下使用.css属性,并且只作为最后的手段回退它.

Starx的回答让我想到了这个想法,所以我要将他的信息标记为答案.

最佳答案
我看到的最好方法是

>为所有非本地块元素分配一个公共类
>使用jQuery的mulitple-selector.

然后我们可以像这样简单地做到这一点

CSS:

.block { display: block; }

jQuery的:

var blockelements = $("div, p, table, ..., .block"); 
                                   // ^ represents other block tags

如果要包含所有块元素.这是link

转载注明原文:javascript – 查找所有块元素 - 代码日志