Question

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

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.我是正则表达式的完全新手。我的解决方案看似沉重和/或不优雅。我可以使用更好的正则表达式吗？是否有更好的替代方法来使用replace / regex？

Answer 1

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

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

1 个答案: