javascript - 如何使 HTML 文本显示为禁用状态？

Question

我有一个包含 span 的 div(span 也可以是一个段落；我不在乎):

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

我希望能够在禁用和启用之间切换跨度文本的外观。我已经尝试过类似的东西

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');

这让我解决了文本问题，但是我的一些文本跨度将具有包含 Bootstrap 图标的相邻跨度，并且我也需要将它们显示为禁用。我是否忽略了一些非常明显的事情？

提前致谢。

Answer 1

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