如何在 div 中制作非活动内容？

Question

如何使用 JavaScript 使某些 div 块中的内容处于非活动状态？

假设有一个带有命令“启用/禁用”的按钮。并且有一个带有一些文本的 div 块。当按下按钮“启用/禁用”时，是否为“启用”，您可以使用里面的内容，但是当“禁用”时，您不能使用 div 块中的内容。

我想为了在 div 块中制作非活动内容，我们需要在其上放置另一层以防止编辑内容 div 块上的内容。

我对如何实现这种功能感到困惑。

原文由 ilnur777 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在不使用叠加层的情况下，您可以使用 CSS 在 div pointer-events: none 上使用 —。

 div.disabled
{
  pointer-events: none;

  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

参考

原文由 Evan Mulawski 发布，翻译遵循 CC BY-SA 4.0 许可协议