使用显示块获取父元素

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;

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

现在，当我把光标放在文本“另一个帕拉”或双击“另一个帕拉”（在我的mac中选择整个帕拉）并单击“获取块级父级”按钮时，我得到了HTML段落元素的警报。

但是，当我将光标放在第一个段落（“p标记下的一些文本”）中并单击按钮时，我会在警报中看到“HTMLParagraphElement”。当我双击第二个段落，选择整个第一个段落，然后点击按钮，我得到“HtmlLevel”。

我希望我的代码能像第二段那样工作。i、 例如，双击句子并单击按钮，它应该显示“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;
            }
        }
    }
}

不停摆弄

你必须测试getComputedStyle的结果，然后再调用getProperty tyValue，因为文本节点没有样式，它返回null。