Question

解决!!!这是解决方案，只需看看下面的问题。 Firefox自动将 rgba（126,47,182,0）转换为透明，因此解决方案是将其保持接近零，但不要像这样 rgba（126），47,182,0.01）并且做 var background = window.getComputedStyle（menu，null）.getPropertyValue（＆＃34; background-image＆＃34;）;

CSS：

.header-menu--formats{
    background: linear-gradient(45deg, rgba(126,47,182,0) 0%, rgba(126,47,182,0) 25%, rgba(249,71,157,0) 80%, rgba(249,71,157,0) 100%);
}

HTML：

<nav class="header-menu header-menu--formats">menu</nav>

JavaScript的：

var menu = document.querySelector('.header-menu');  
var background = window.getComputedStyle(menu, null).getPropertyValue("background");
console.log("BACKGROUND:", background);

这在谷歌浏览器中完全正常，但当我尝试在Firefox中运行它时， getComputedStyle 函数返回 null 。我尝试了其他样式，但它有效，但不适用于背景

演示在这里：simple demo

我的目标是获得元素的计算背景。我需要得到这个值 - ＆gt; backgroundImage：线性渐变（45deg，rgba（126,47,182,0）0％，rgba（126,47,182,0）25％，rgba（249,71,157,0）80％， rgba（249,71,157,0）100％）

Answer 1

Firefox单独返回setInterval(callAgain, 5000)个样式

要获得应用的样式，您需要以下代码

background

或者您可以获得所有引用var background = window.getComputedStyle(menu, null).getPropertyValue("background-image");

的样式

background

var menu = document.querySelector('.header-menu');  
var menustyle = window.getComputedStyle(menu, null);
for(var i in menustyle){
  if(i.indexOf("background")>-1){
    console.log(i + ": ", menustyle[i]);
  }
}

.header-menu--formats{
    background: linear-gradient(45deg, rgba(126,47,182,0) 0%, rgba(126,47,182,0) 25%, rgba(249,71,157,0) 80%, rgba(249,71,157,0) 100%);
}

检查它是否是firefox

<nav class="header-menu header-menu--formats">menu</nav>

当尝试获取＆＃34; background＆＃34;的值时，getComputedStyle在Firefox中返回NULL，但在Chrome中有效

1 个答案: