有没有一种方法可以使用JavaScript修改CSS背景颜色的透明度？

Question

我有一个css文件：

.class1 { background: #fff }

好的，请将需要翻译的内容提供给我。

.class2 { background: rgba(255,0,0,0.5) };

有没有办法我只使用JavaScript来修改.class1的background属性，使其呈现一个opacity:.5的效果？

例如，我想要这样的效果：

$('.class1').css('background-opacity', '.5');

有人能帮忙吗？

谢谢

- AGamePlayer

---

你能分享更多的上下文吗？ - Temani Afif

Answer 1

您可能正在寻找的是一种能够从HTML颜色返回RGBA的功能...

可能类似于以下内容：

var color = $('.class1').css("background-color"); // this will return RGB() color even if it was html color before
var opacity = 0.5;
color = color.toString().replace(/\)/g,"," + opacity + ")");
$('.class1').css("background-color",color);

可以在这里查看实时代码演示。

- Flash Thunder

---

这假设所有的.class1元素一开始都有相同的背景颜色，并且它将应用一个内联样式，这个样式将具有不同的特异性比原始的CSS规则。 - Sean

@Sean 根据提问者的问题背景，这个回答是正确的。 - disinfor

是的...没错...作者不想改变颜色本身。 - Flash Thunder

@Sean 没有限制。这将任何颜色转换为RGB值并设置不透明度。假设仅基于OP提供的内容..这是有效的。如果OP有更多要求，那么我会同意，但是我们没有得到任何要求。 - disinfor

如果更具体的选择器覆盖了某些元素的class1背景颜色，这种方法将会将背景颜色改回class1颜色的透明版本。这是一个需要注意的限制。 - Sean

Answer 2

您可以使用 CSS变量 来实现此功能。

const div = document.querySelector("div");

div.addEventListener("click", () => {
  div.style.setProperty("--a", "0.5");
});

div {
  height: 100px;
  width: 100px;
  --a: 1;
  background: rgba(255, 0, 0, var(--a));
}

<div>
  Click for opacity.
</div>

- doğukan

---

@Anthony 点击该 div。 - doğukan

非常好的解决方案；只是想知道根据 OP 的规定是否允许 CSS 修改。 - Anthony

问题要求使用仅JS的解决方案。 - Sean

但我仍然喜欢那个解决方案，我给它加上+1。 - Flash Thunder