Question

我有一个包含跨度的div（跨度也可以是段落;我不在乎）：

<div id="aDiv">
  <span id="aQuestion">What's next?</span>
</div>

我希望能够在禁用和启用之间切换span的文本外观。

我尝试过的东西

document.getElementById('aQuestion').setAttribute("disabled", "disabled");

但没有任何运气：文字没有那种灰色的“禁用”外观。当我检查元素时，我可以看到已添加属性。事实上，即使我的原始代码如下所示：

<div id="aDiv">
  <span id="aQuestion" disabled>What's next?</span>
</div>

该文字似乎未被禁用。

我似乎走错了路，但在线搜索还没有找到解决方案。有没有办法实现这个目标？我意识到文本被禁用的概念并不完全有意义，因为它们不涉及用户交互，但我需要这样看。

我唯一想到的就是使用CSS，这些内容如下： CSS：

<style type="text/css">
  .disableMe {
     color:darkgrey;
   }
</style>

HTML：

<span id="aQuestion" class="disableMe">What's next?</span>

JS：

document.getElementById('aSpan').classList.remove('disableMe');

这种方式让我解决了文本的问题，但是我的一些文本跨度将包含包含引导程序图标的相邻跨度，我也需要这些看起来也是禁用的。我忽略了一些非常明显的事情吗？

提前致谢。

Answer 1

这是一个span元素，因此它没有禁用修饰符，只需创建一个css类，它可以提供你想要的外观并使用它。

Answer 2

span仅包含全局属性。所以你无法禁用它。 More here

Answer 3

＆＃13;

p {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
p:hover {
  cursor: not-allowed;
}

＆＃13;

<p>hi there my name is Ibrahim</p>

＆＃13;

这种方式当用户徘徊时感觉不对，加上他无法选择它！

如何使HTML文字显示为禁用状态？

3 个答案: