仅某些类的 Javascript contentEditable

Question

我有以下脚本使 HTML 页面可编辑document.body.contentEditable = 'true'; document.designMode='on';我只想允许我的用户编辑具有“编辑”类的部分。这可能吗？

Answer 1

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>

你可以这样做。首先，选择 DOM 中的所有类，然后querySelectorAll从循环中迭代它forEach。

Answer 2

是的，这是可能的。

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

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

Answer 3

是的，这是可能的，只需对所有具有编辑类的元素运行一个简单的循环，并给它们 contentEditable true

[...document.getElementsByClassName("edit")].forEach(

  el => el.contentEditable = "true"

);

就这样！

编辑：正如哈利在评论中提到的那样：forEach 对 htmlCollection 对象不起作用，因此您必须使用 [...theHTMLCollection] 将其转换为数组

Answer 4

您可以尝试找到所有类名为“edit”的元素，然后像下面这样将它们全部更改掉。

document.querySelectorAll('.edit').forEach(function(element){

    element.contentEditable = 'true';

})