Question

我有一些像这样的div：

<div id="op" contentEditable="true">hello<div class="dynamic">......sth
</div> <div class="dynamic"> ...sth
</div> .......<div class="dynamic"> </div>.. <div class="dynamic"> </div>..</div>

div中带有id“op”的div是动态创建的，并使用appendChild方法附加到“op”。添加完所有动态div后，我需要将div“op”的contentEditable更改为false，而将“op”内的div更改为true。基本上，话虽如此，我的目标是能够修改具有true contentEditable的div，但是使用false contentEditable将div附加到div上。我这样做了：

document.getElementById("op").setAttribute("contentEditable",false);
document.getElementsByClassName("dynamic").setAttribute("contentEditable",true);

这不起作用，我认为原因很简单。虽然我修改了“动态”类div的contentEditable，但它们仍然在具有false contentEditable的div中。

有没有办法覆盖父contentEditable属性，以便它允许子进程保留自己的contentEditable，并且应用父内容可编辑？

Answer 1

您是否为具有“动态”类的div将contentEditable属性设置为false或true？在您的代码段中，您将所有div设置为false。

contentEditable（缺少时）的默认值为inherit。因此，当您将元素的contentEditable设置为true时，该元素的所有子元素也将是内容可编辑的。

鉴于以下HTML，您可以编辑所有文本，甚至意外删除子div：

<div id="parent" contenteditable="true">
    Parent div
    <div id="child"><!-- contentEditable="true" is implied -->
        Child div
    </div>
</div>

使用此HTML，您只能编辑文本“Parent div”：

<div id="parent" contenteditable="true">
    Parent div
    <div id="child" contenteditable="false">
        Child div
    </div>
</div>

使用javascript覆盖父内容可编辑

1 个答案: