如何使用 innerHTML 更改文本不透明度？答案

【问题标题】：How to change text opacity using innerHTML?如何使用 innerHTML 更改文本不透明度？
【发布时间】：2015-07-15 19:41:44
【问题描述】：

您好，我只是想知道是否有一种方法可以使用几乎作为容器的 innerHTML 来更改文本的不透明度...

var x = document.getElementById("myId");
x.innerHTML.style.opacity = .5;

？？？也许是这样的？我有一个想法，有一个不同的类，只是将该类添加到特定的 HTML，但我试图抓住一个元素的 html，将文本不透明度更改为较浅的阴影，从元素中删除它但将它保存在一个变量中，添加在新的 html 中，然后添加原始的 html，但我希望新的 html 比原始的更暗，所以我不能改变元素的不透明度，否则它会影响元素中的所有文本。如果有人有任何建议，将不胜感激。我试图只使用 HTML、CSS 和 Javascript，所以如果我能提供帮助，我会尽量避免添加任何库。谢谢。

【问题讨论】：

如果您只想要字母而不是容器的透明度，则必须将 color 设置为 rgba 值。例如，.myTransparentText { color: rgba(0,0,0,0.5) } 将使您的文本变黑，字母上的不透明度为 50%。没有其他选择。 css3.info/introduction-opacity-rgba
既然你想改变一个元素的innerHtml，为什么不改变这个父元素的不透明度呢？
好的，让我试试看我能不能做点什么。如果你想明白我的意思，我试图达到的效果出现在基于文本的游戏“暗室”中

标签： javascript css element opacity innerhtml

【解决方案1】：

你可以改变所有孩子的不透明度

var childrens = document.getElementById("myId").children;

for(var i = 0, length = childrens.length; i < length; i++) {
    childrens[i].style.opacity = 0.5;
}

【讨论】：

我试过了，在通过代码运行了一些跟踪器后，它说一切都是正确的，但文本没有改变，所以我将不得不稍后再处理一下。谢谢你，我没想过用孩子。

【解决方案2】：

不远……那样：

var x = document.getElementById("myId");
x.style.opacity = .5;

【讨论】：

我不能这样做，因为我试图只更改部分文本而不是整个元素。
多年后，我意识到这是一个简单的答案。对不起我的无知。我只是对 javascript dom 操作或我正在做的事情没有很好的理解。

【解决方案3】：

你可以使用 x.style.opacity = 0.5

更新：由于您只需要更改文本的一部分，因此您应该这样做

x= document.getElementById("id");
x.innerHtml = "not important text <div id='important'>Important</div>";
document.getElementById("important").style.opacity = 0.5;

你为什么要做这样的事情？你能解释更多吗，，所以我们可以帮助你吗？

【讨论】：

我不能，因为我试图只更改部分文本而不是整个元素。
多年后，我意识到这是一个简单的答案。对不起我的无知。我只是对 javascript dom 操作或我正在做的事情没有很好的理解。