Css 如何在div中生成非活动内容？

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

假设有一个带有命令Enable/Disable的按钮。还有一个div块和一些文本。当按下“启用/禁用”按钮时，它是“启用”，您可以处理内部内容，但当禁用时，您不能处理div块内部的内容

我想，为了在div块中生成非活动内容，我们需要在其上添加另一层，以防止编辑contentdiv块上的内容

---

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

如果不使用覆盖，您可以使用指针事件：CSS中的div上没有指针事件，但这在IE或Opera中不起作用

div.disabled
{
  pointer-events: none;

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

---

使用jquery可以执行以下操作：

// To disable 
$('#targetDiv').children().attr('disabled', 'disabled');

// To enable
$('#targetDiv').children().attr('enabled', 'enabled');

下面是一个JSFIDLE示例：

您还可以选择目标div的子级，并向其添加一个禁用的css类，该类具有不同的视觉属性作为标注

//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");

//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");

---

下面是一个JSFIDLE，以为例：

如果您想在另一个屏幕大小的视图中隐藏整个div。您可以以下面的代码为例

div.disabled{
  display: none;
}

将CSS中div[disabled]的指针事件设置为none

可以通过添加禁用的属性来禁用div

---

定义内部内容的工作。你说的是编辑/内容可编辑吗？当他们激活div并将其值设置为div html时，可能会在div中添加一个文本框。然后，当它被停用时，您只需移除文本框并将div html设置为文本框的值，问题是禁用该按钮。请仔细阅读问题，这应该是公认的答案！

div[disabled]
{
  pointer-events: none;
  opacity: 0.7;
}

<div disabled>
  /* Contents */
</div>

div[disabled]
{
  pointer-events: none;
  opacity: 0.6;
  background: rgba(200, 54, 54, 0.5);  
  background-color: yellow;
  filter: alpha(opacity=50);
  zoom: 1;  
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
  -moz-opacity: 0.5; 
  -khtml-opacity: 0.5;  
}