Question

我遇到了一个问题，我正在尝试根据我指定的值使用JavaScript更新元素的背景渐变。

我试过这条路：

elem.style.backgroundImage = '-webkit-gradient(radial, '+x+' '+y+', 0, '+x+' '+y+', 800, from(#ccc), to(#333)), -moz-radial-gradient('+x+'px '+y+'px, circle cover, #ccc 0, #333 100%)';

由于Webkit和Gecko有两种不同的CSS3渐变语法，我需要指定两者。但是，上面的代码不起作用。如果我只有Gecko语法或Webkit语法，而不是两者都有效，它就可以工作。

我认为您可以检查CSS渐变支持，但我的问题是，有没有办法检查在没有浏览器嗅探的情况下需要使用哪种语法？请记住，我需要以这种方式设置渐变，因为渐变的x和y坐标会动态变化。

希望这是有道理的，谢谢。

Answer 1

您根本不需要进行任何检测。只需连续两次设置element.style.backgroundImage，那些不解析的将被忽略。

Answer 2

编辑以下内容对其他原因很有用，但事实上，我认为这不会影响OP知道是否使用WebKit或Firefox symtax的问题！（Doh）它有助于了解是否可以使用渐变。

再次修改但是！查看Modernizr源代码向我们展示了如何通过功能测试来实现（他们很聪明，那些人）。您可以通过自己查看源代码来解决这个问题，但这里有一个很快被黑客攻击的例子：

function testGradientSyntax() {
    var element;

    element = document.createElement("testsyntax");
    element.style.cssText =
        "background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))";
    if (element.style.background.indexOf("-webkit") >= 0) {
        // It's WebKit syntax
        log("This supports WebKit syntax");
    }
    else {
        // It's not WebKit syntax
        log("This doesn't support WebKit syntax");
    }
}

您可能希望使用Modernizr。它检测到relevant syntax并为您提供了一种使用具有两种语法的单个CSS文件的方法。

来自docs的示例渐变代码：

button.glossy {
   background: #ccc url(gloss.png) 50% 50% repeat-x;
}
.cssgradients button.glossy {
   background: #ccc -webkit-gradient(linear, left top, left bottom, 
         from(rgba(255,255,255, .4)), 
         color-stop(0.5, rgba(255,255,255, .7)), 
         color-stop(0.5, rgba(0,0,0, .2)), 
         to(rgba(0,0,0, .1)));
}
.cssgradients button.glossy:hover {
   background-color: #fff;
}

（修改）在上文中，我删除了.cssgradients button.glossy规则末尾的一行，该规则看起来像是文档中的错误。）

看到.cssgradients班级？当您运行Modernizr时，它会检测这是否是相关语法，如果是，则将该类添加到html元素，这会打开后代选择器.cssgradients button.glossy，以便应用该规则。

遗憾的是，所有这些都依赖于启用了Javascript的浏览器。

Answer 3

如果有人有兴趣，这就是我想出的。我相信它可以使用很多改进，但它到目前为止都有效。

var syntax;
var syntaxCheck = document.createElement('syntax');
var syntaxFound = false;
while(!syntaxFound) {

     syntaxCheck.style.backgroundImage = '-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white))';
     if(syntaxCheck.style.backgroundImage.indexOf( 'webkit' ) !== -1) {
          syntax = 'webkit';
          syntaxFound = true;
          break;
     }

     syntaxCheck.style.backgroundImage = '-moz-linear-gradient(left top,#9f9, white)';
     if(syntaxCheck.style.backgroundImage.indexOf( 'moz' ) !== -1) {
          syntax = 'moz';
          syntaxFound = true;
          break;
     }
}

if(syntax == 'webkit') // use -webkit syntax
else if(syntax == 'moz') // use -moz syntax

测试CSS3径向梯度供应商语法

3 个答案: