javascript - 获取带有显示 block 的父元素

Question

我有这个html

<div id="editor" contenteditable="true">
This text is directly under div
<p>Some text under p tag. <span> Some under span tag</span>  and this is another text</p>
<p>Another para</p>
</div>
<button>Get block level parent</button>

Javascript

function getParentBlock() {
    element = document.getSelection().focusNode;
    while (p = element.parentNode) {
        displaystyle = window.getComputedStyle(p, null).getPropertyValue('display');
        if (displaystyle == 'block') {
            return p;
        }
        element = element.parentNode;
    }
}

function alertCurrentParent() {
    alert(getParentBlock());
}
btn = document.querySelector('button');
btn.onclick = alertCurrentParent;

jsfiddle在这里:http://jsfiddle.net/shankardevy/aA8Kb/

现在，当我将光标放在文本“Another Para”内或双击“Another Para”(在我的 Mac 中选择整个 para)并单击按钮“获取 block 级父级”时，我会收到 HTMLParagraphElement 警报。

但是，当我将光标放在第一段(“p 标签下的一些文本”)并单击按钮时，我会收到“HTMLParagraphElement”警报。当我双击选择整个第一段的第二段，然后单击按钮时，我得到“HTMLDivElement”。

我希望我的代码能够像第二段中那样工作。即，双击该句子并单击按钮，它应该显示“HTMLParagraphElement”。我该怎么做？

非常感谢任何帮助!

Answer 1

问题是您从父节点开始循环。当您选择整个段落时，其父级是 DIV。因此，从当前元素而不是父元素开始循环。

function getParentBlock() {
    var element = document.getSelection().focusNode;
    for (var p = element; p; p = p.parentNode) {
        var style = window.getComputedStyle(p, null);
        if (style) {
            var displaystyle = style.getPropertyValue('display');
            if (displaystyle == 'block') {
                return p;
            }
        }
    }
}

FIDDLE

在调用 getPropertyValue 之前，您必须测试 getCompulatedStyle 的结果，因为文本节点没有样式，它会返回 null。