Javascript content仅可用于某些类

问题描述

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

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

我只允许我的用户使用“编辑”类来编辑部分。这可能吗？

解决方法

是的。

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

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

---

,

是的，这是可能的，只需对带有edit类的所有元素运行一个简单的循环，并将它们赋予contentEditable true

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

仅此而已！

编辑：正如评论中的哈利（harry）所述：forEach在htmlCollection对象上不起作用，因此您必须使用[... theHTMLCollection]将其转换为数组。

,

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>

您可以执行此操作。首先，通过querySelectorAll选择DOM中的所有类，然后从forEach循环进行迭代。

,

您可以尝试找到所有类名为'edit'的元素，并按如下所示更改所有元素。

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