4

background-imageこんにちは、すべてのブラウザに jqueryを設定したい:

background-image:linear-gradient(green, blue); /* Norme W3C */
background-image:-moz-linear-gradient(green, blue); /* Firefox */
background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */
background-image:-o-linear-gradient(green, blue); /* Opera */
background-image:-ms-linear-gradient(green, blue); /* IE */

そして私はそれをそのように設定しました:

$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );

W3C のみですが、Firefox では動作しますが、Chrome では動作しません。

この設定をすべて設定するにはどうすればよいですか?

4

2 に答える 2

5

jQuery 1.8 ブログのリリースから

自動 CSS プレフィックス: .css() または .animate() で CSS プロパティを使用すると、そのブラウザーに適切なプレフィックス付きプロパティが (適切な場合) 使用されます。たとえば、.css("user-select", "none"); を見てみましょう。Chrome/Safari では値を「-webkit-user-select」に設定し、Firefox では「-moz-user-select」を使用し、IE10 では「-ms-user-select」を使用します。

最新バージョンにアップグレードすると、これは自動的に処理されます。

編集

これは自動的に機能するはずです。以下はjQuery 1.8 で実装する必要があります。

var cssPrefixString = {};
var cssPrefix = function(propertie) {
    if (cssPrefixString[propertie] || cssPrefixString[propertie] === '') return cssPrefixString[propertie] + propertie;
    var e = document.createElement('div');
    var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports...
    for (var i in prefixes) {
        if (typeof e.style[prefixes[i] + propertie] !== 'undefined') {
            cssPrefixString[propertie] = prefixes[i];
            return prefixes[i] + propertie;
        }
    }
    return false;
};

使い方

var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform"
if (cssTransform ) {
    var cssProp = {};
    cssProp['border'] = '1px solid rgba(0, 0, 0, .5)';
    cssProp[cssPrefix('Transform')] = 'rotate(20deg)';
    cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
    cssProp[cssPrefix('boxShadow')] = '2px 2px 6px grey';
    $('div#myDiv').css(cssProp);
    // console.log(cssProp);
}

リンクから来たもの - 動作中のjsFiddle

したがって、これらの 2 つの方法のいずれかが機能するはずです。

于 2012-11-06T19:37:12.337 に答える
1

代わりに-prefix-freeを使用することもできます: http://leaverou.github.com/prefixfree/

CSS にベンダー プレフィックスを動的に追加します。

于 2012-11-06T19:38:11.643 に答える