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/

现在，当我将光标放在文本＆＃39; Another Para＆＃39;或者双击“另一个Para”＆＃39; （在我的mac中选择整个段落）并单击按钮＆＃39;获取块级父级＆＃39;，我得到警告中的HTMLParagraphElement。

然而，当我将光标放在第一个para（＆＃34; p标签下的某些文字＆＃34;），然后我点击按钮时，我得到＆＃34; HTMLParagraphElement＆＃34;警惕。当我双击选择整个第一段的第二段时，单击按钮，我得到＆＃34; HTMLDivElement＆＃34;。

我想让我的代码像第二段一样工作。即，双击该句子并单击该按钮，它应显示我＆＃34; HTMLParagraphElement＆＃34;。我该怎么做？

非常感谢任何帮助！

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之前，您必须测试getComputedStyle的结果，因为文本节点没有样式并返回null。

获取带显示块的父元素

1 个答案: