Javascript 仅某些类的 contentEditable

Question

我有以下脚本可以使 HTML 页面可编辑

document.body.contentEditable = 'true'; document.designMode='on';

我只想允许我的用户编辑 class 为“编辑”的部分。这可能吗？

Answer 1

是的，这是可能的。

let el_array = document.getElementsByClassName('edit');

然后循环 el_array 并将其应用于每个元素 el.contentEditable = true;

Answer 2

您可以尝试找到名称为 class 'edit' 的所有元素，然后像下面那样将它们全部改掉。

document.querySelectorAll('.edit').forEach(function(element){
    element.contentEditable = 'true';
})

Answer 3

是的，这是可能的，只需运行对所有元素进行简单的循环编辑 class 并为它们提供 contentEditable true

[...document.getElementsByClassName("edit")].forEach(
  el => el.contentEditable = "true"
);

就这些！

编辑：正如 harry 在评论中提到的：forEach 不适用于 htmlCollection 对象，因此您必须使用 [...theHTMLCollection]

将其转换为数组

Answer 4

function edit_content(){
  document.querySelectorAll('.myP').forEach(function(ele){
      ele.contentEditable = 'true';
  })
}

<p class="myP">
abcdefghijklmnop
</p>

<button onclick="edit_content()">
Click to edit
</button>

你可以做到。首先，select DOM 中的所有类 by querySelectorAll 然后从 forEach 循环迭代它。

Javascript contentEditable of certain classes only