jQuery css（）方法的渐变过滤器 [英] Gradient Filter on jQuery css() Method

问题描述

我尝试改变一些样式的页面，我想使用 jQuery - css（）方法在userscript上改变样式。

I tried change some style one of page, I want style to change with using jQuery - css() methodon userscript.

我尝试过 jsfiddle ，我的浏览器使用Tampermonkey

I tried on jsfiddle, my browser using Tampermonkey

某些属性样式已更改，但渐​​变过滤器这里是页面上的样式：

Some attribute style changed but gradient filter not changed. here's is style on page :

#site-header .meta-header {
    width: 100%;
    min-width: 960px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    background-color: #1484ce;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF1484CE', endColorstr='#FF1274B5');
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1484ce), color-stop(100%, #1274b5));
    background-image: -webkit-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: -moz-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: -o-linear-gradient(top, #1484ce 0%,#1274b5 100%);
    background-image: linear-gradient(top, #1484ce 0%,#1274b5 100%);   
    -webkit-box-shadow: 0 2px 0 #0e5a8c;
    box-shadow: 0 2px 0 #0e5a8c;
    border-bottom: solid 1px rgba(255,255,255,0.1);
    font-size: 13px;
    }

这里是我的用户脚本：

// ==UserScript==
// @name       Change Style
// @namespace  http://use.i.E.your.homepage/
// @include    http://fiddle.jshell.net/tAKHd/show/light/
// @version    0.1
// @description  enter something useful
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/


$("body").css({
    "background": "none",
    "background-color": "#2f2f2f"
});

$("#site-header .meta-header").css({
    "background-color": "#2c2c2c",

    /*start - This is style not showing*/

    "filter" : "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#333333', endColorstr='#222222')",
    "background-image": "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333), color-stop(100%, #222))",
    "background-image": "-webkit-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "-moz-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "-o-linear-gradient(top, #333 0%,#222 100%)",
    "background-image": "linear-gradient(top, #333 0%,#222 100%)",

    /* end */

    "-webkit-box-shadow": "0 2px 0 rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1)",
    "box-shadow": "0 2px 0 rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1)",
    "border-bottom": "solid 1px rgba(255,255,255,0.1)"
});

如何修复？

推荐答案

好，我解决了我的问题

解决方案：

var meta = $("#site-header .meta-header")
meta.css("background-image", "-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333), color-stop(100%, #222))");
meta.css("background-image", "-webkit-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "-moz-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "-o-linear-gradient(top, #333 0%,#222 100%)");
meta.css("background-image", "linear-gradient(top, #333 0%,#222 100%)");

这篇关于jQuery css（）方法的渐变过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！