2

指定した値に基づいて 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 グラデーション用の 2 つの異なる構文があるため、両方を指定する必要があります。ただし、上記のコードは機能しません。Gecko 構文または Webkit 構文のみを使用している場合に機能します。両方を使用する必要はありません。

CSS グラデーションのサポートを確認できると思いますが、私の質問は、ブラウザーのスニッフィングなしで使用する必要がある構文を確認する方法はありますか? グラデーションの x 座標と y 座標が動的に変化するため、グラデーションをこのように設定する必要があることに注意してください。

これが理にかなっていることを願っています、ありがとう。

4

3 に答える 3

7

検出を行う必要はまったくありません。element.style.backgroundImage を 2 回続けて設定するだけで、解析されないものは無視されます。

于 2010-05-22T23:52:15.187 に答える
1

誰かが興味を持っているなら、ここに私が思いついたものがあります. 私はそれが多くの改善を使用できると確信していますが、これまでのところうまくいきます.

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
于 2010-05-22T08:21:01.417 に答える
1

編集以下は他の理由で役立ちますが、実際には、WebKitまたはFirefoxシンタックスのどちらを使用するかを知るというOPの問題には役立たないと思います! (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を使用することをお勧めします。関連する構文を検出し、単一の CSS ファイルを両方の構文で使用する方法を提供します。

ドキュメントからのサンプル グラデーション コード:

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 が有効になっているブラウザに依存しています。

于 2010-05-22T07:46:37.027 に答える