增加和减少 HTML 元素上的背景 RGBA 不透明度答案

【问题标题】：Increment and decrement background RGBA opacity on HTML element增加和减少 HTML 元素上的背景 RGBA 不透明度
【发布时间】：2018-03-08 15:40:37
【问题描述】：

场景：仅使用纯 Javascript（无库），我需要增加（或减少）HTML 元素的背景色不透明度，而不影响任何子元素的不透明度。新的不透明度可以是完全不透明到完全透明范围内的任何地方。不需要支持 IE9 之前的浏览器，因此选择的方法是使用来自getComputedStyle 的background-color 属性。我只看到这返回了两种格式的字符串（以纯白色为例）：

rgba(255, 255, 255, 0.5) 应用不透明度时。
rgb(255, 255, 255) 完全不透明时 - 当不透明度为 1 时，它会更改为这种格式。

我需要重置格式的背景颜色，rgba(255, 255, 255, 0.5)

代码片段：

    myBG = window.getComputedStyle( myElement, null ).getPropertyValue( "background-color" );
    myElement.style.backgroundColor = myBG.replace( /(.*)\((\s*\d+)\,(\s*\d+)\,(\s*\d+)(?:\,|\))(.*)/ , 'rgba( $2, $3, $4, ' + myNewOpacity.toString() + ' )' );

这在我进行的有限测试中有效 - 但是：

问题 1. 我是 Javascript 和 Web 开发的初学者。我会得到与上述两种不匹配的返回格式吗（跨浏览器兼容性问题）？

问题2。我是正则表达式的新手。我的解决方案似乎很重和/或不雅。我可以使用更好的正则表达式吗？有没有比使用替换/正则表达式更好的选择？

【问题讨论】：

标签： javascript css regex html

【解决方案1】：

据我所知，没有其他可能的返回值。如果设置了 opacity，则只能有一个 rgba(...) 返回值，所以在防御性编程的心态中，你应该只解析和修改如果是 rgba 的值（另见In Javascript how can I set rgba without specifying the rgb?）
请参阅上面的链接以获得更易于阅读的不使用正则表达式的解决方案。

【讨论】：