如何在 jQuery.css() 方法中为所有浏览器编写 CSS？

Posted 2023-05-09

【中文标题】如何在 jQuery.css() 方法中为所有浏览器编写 CSS？

【英文标题】：How to code CSS for all browsers in jQuery.css() method?

【发布时间】：2012-08-19 12:57:28

【问题描述】：

我正在添加一个需要多浏览器 CSS 的动态渐变；如果针对一个浏览器它可以工作，甚至如果写在 CSS 文件中也可以工作，但是在 jquery 中使用 .css() 方法它无法加载背景。要了解我在这里尝试做的事情是我的代码示例，该示例在添加所有浏览器 CSS 时不起作用...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed')
            $jj('.fixedElement').css(
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '#00172A',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))',
                'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0 )',
                'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            );

在使用单个“后台”调用时，它将在所选浏览器中运行，例如在 firefox 中运行...

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed')
            $jj('.fixedElement').css(
                'position': 'fixed', 'top': '0px', 'z-index': '9999',
                'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
                'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
                'color': '#ffffff'
            );

您可以在http://www.thediabetesnetwork.com 找到实时代码。 编辑：通过从 json 对象中删除 css 并使用 jquery api 来修复。请注意调用是如何包装在 json 括号中并使用 json 语法的。这就是问题所在。现在看起来像这样。

if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed')
            $jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
            $jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))');
            $jj('.fixedElement').css(
                
                'position': 'fixed',
                'top': '0',
                'z-index': '9999',
                'width': '120%',
                'paddingRight': '20%',
                'paddingLeft': '20%',
                'marginLeft': '-10%',
                'left': '0',
                'boxShadow': '0 3px 5px #888888',
                'lineHeight': '100%',
                'paddingTop': '0',
                'paddingBottom': '0',
                'color': '#ffffff'
            );

【问题讨论】：

你应该看看这个问题：***.com/questions/5735521/jquery-css-gradient

【参考方案1】：

请参见此处：http://blog.jquery.com/2012/08/09/jquery-1-8-released/ 您只需使用 linear-gradient，jQuery 将自动填充其余部分。

不要忘记安装 CSS Pie 以在旧版 IE 中支持渐变。

然而，这确实引发了 jQuery 中 css-pie polyfill 的问题......

【讨论】：

-见问题底部。我发现您的答案对另一个网站很有用，所以接受了这个。但是，答案是我在 jQuery 中使用 JSON 对象。我重写了它以使用 jQuery API。由于 jReviews，我不得不坚持使用 jQuery 1.7.2，这就是为什么我无法在这个站点上使用 1.8 的新功能。也许 JSON 有更多我不熟悉的细节，但在我的尝试中肯定失败了。

@Shane 当然！当你一次设置它们时，每个背景元素都会覆盖上面的元素 - 它与 jQuery 无关，在 javascript 中创建一个具有多个同名元素的对象是根本不可能的。

-但我的问题所在的 JSON 表单中的一个元素单独使用线性梯度是行不通的（并且在测试中也没有）。我指出，因为其他人可能不明白这不是 jQuery，虽然嵌套在其中。因此不使用 1.8 的 API。我现在拥有的代码确实可以在多个浏览器中运行，并且似乎没有覆盖上面的代码，它忽略了那些不起作用的代码（通过浏览器选择）.. 至少在玩了一下之后。如果您觉得发生了其他事情，我愿意接受任何建议或意见。