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

Question

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

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

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

我很困惑如何实现这种功能。

Answer 1

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

div.disabled
{
  pointer-events: none;
    
  /* for "disabled" effect */
  opacity: 0.5;
  background: #CCC;
}

参考

Answer 2

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

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

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

<div disabled>
  <!-- Contents -->
</div>

Answer 3

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;  
}

Answer 4

使用 jquery 你可能会做这样的事情：

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

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

这是一个 jsFiddle 示例：http: //jsfiddle.net/monknomo/gLukqygq/

您还可以选择目标 div 的子元素，并为它们添加一个“已禁用”的 css 类，并使用不同的视觉属性作为标注。

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

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

这是一个以 jsFiddle 为例：https ://jsfiddle.net/monknomo/g8zt9t3m/

Answer 5

如果您想在另一个屏幕尺寸的视图中隐藏整个 div。您可以按照以下代码为例。

div.disabled{
  display: none;
}