提问人：shastings 提问时间：2/6/2021 最后编辑：shastings 更新时间：2/6/2021 访问量：844
使用 Javascript 将可编辑内容从 true 更改为 false
Changing editable content from true to false using Javascript
问：
所以我试图用 js 覆盖或取消 contenteditable=“true”，因为据我所知，Notion Enhancer 没有添加 html 文件的选项。他们确实可以选择添加 css 和客户端 javascript，所以我正在尝试使用 js 将 contenteditable 变成 false。我尝试了很多选择，但似乎没有任何效果。有没有人对如何在不接触 HTML 的情况下通过 js 将其变成 false 有任何想法？
<div style="display: flex; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 600; font-size: 1.5em; line-height: 1.3; color: inherit; fill: inherit;">
<div contenteditable="true" spellcheck="true" placeholder="Heading 2" data-root="true" class="notranslate" style="max-width: 100%; width: 100%; white-space: pre-wrap; word-break: break-word; caret-color: rgb(55, 53, 47); padding: 3px 2px;">Monday</div>
</div>
</div>
正如我所说，HTML 是不可协商的，所以一切都必须通过 css 或 js。我想使 contenteditable false 来更改标题周围的填充。
答：
0赞
brunoff
2/6/2021
#1
如果您只想引用这个特定的 div，也许我们应该使用占位符来定位它：
document.querySelector('div[placeholder="Heading 2"]').contentEditable=false;
在这里测试，在 firefox 中吃得最少，contentEditable 在设置时必须在 Editable 上有大写字母 E。
评论
0赞
shastings
2/6/2021
但是之后我可以通过 css 或 js 设置占位符的样式吗？因为它仍然对我不起作用。我本质上是在尝试更改填充，但由于内容可编辑，我不能。因此，如果我将其渲染为假，我想我可以使用占位符进行自己的样式设置。
0赞
brunoff
2/6/2021
是的你可以。例如：将像更改标志之前一样工作document.querySelector('div[placeholder="Heading 2"]').style.backgroundColor='yellow';contentEditable
0赞
NineBerry
2/6/2021
#2
因此，这里的问题与属性无关。contentEditable
问题在于 html 代码中的标记包含一个属性，该属性已指定 的值。html 代码中指定的这些值的优先级高于 css 中指定的规范。divstylepadding
可能的解决方案 1：
使用 css 中的标记让 css 中的定义覆盖该规则的代码中所做的填充设置：!important
.notion-sub_header-block .notranslate {
background-color: #fed2e4;
width: auto;
position: relative;
padding:30px !important;
}
- 请参阅有关 Specifity 的文档以了解
!important
可能的解决方案 2：
使用 JavaScript 从 html 标记的属性中删除 。paddingstyle
var editableElements = document.querySelectorAll("[class=notranslate");
for (var i = 0; i < editableElements.length; ++i) {
editableElements[i].style.padding = "";
}
在这种情况下，解决方案 1 更优雅，因为不需要 JavaScript。
1赞
Kalki222
2/6/2021
#3
document.getElementById("table").contentEditable = "true";
评论
contenteditable