Javascript -通过jquery对IE8中渐变的ms过滤器

我正在这个颜色控制面板上进行实验，用户可以使用滑入式控制面板更改页面的外观和感觉。另一个复杂性是，滑入面板位于父窗口中，其中更改的页面位于iframe中。我希望更改在控制面板内进行时生效。为此，我不想使用AJAX。为此，我设计了一个算法，它运行良好

除了IE8的一个问题外，一切都正常。加载页面时，我在css中使用此样式定义作为默认值

（感谢路易斯·拉扎里斯——）

这就是我在javascript中使用jQuery所做的工作（hex1和hex2是两个变量，包含两个十六进制值作为梯度）：

如果我排除-ms filter的最后一个条件，代码运行良好（因为根据我阅读的文档，如果jQuery.css支持此过滤器，则没有提到它）。 因为我所看到的解决问题的一个方法是使用

navigator.userAgent

如果是“InternetExplorer8.0”，我会使用单一背景色

---

现在我的问题是，有没有其他方法来解决这个问题，并在IE8上获得梯度呢？

有另一种语法可以用jQuery设置CSS。试试下面的方法

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

---

使用jQuery设置CSS有另一种语法。试试下面的方法

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});

---

您的javascript有问题。

-ms filter

的对象键应该用双括号或单括号括起来，否则会导致语法错误。

您的javascript有问题。

-ms filter

的对象键应该用双括号或单括号括起来，否则会导致语法错误。

谢谢。我没想到会这么简单。在ie8中不起作用，至少在开发工具模拟器中不起作用。它使用的是滤光片而不是ms滤光片，它总是亮蓝色的。好的，谢谢。。。也许我们可以检查哪个浏览器正在访问您的站点，并使用正确的过滤器。您好，Algothym，已经尝试了一整天，这在ie8中不起作用。@JenniferMichelle但是如果您删除行

“filter”：“progid:…

，它在ie8中会起作用吗？这里的问题只是如何使用jQuery设置'-ms filter'属性。。。如果“filter”是IE8的正确属性，则不会。也许你是对的，IE8在“filter”和“-ms filter”的组合中存在问题，但是你必须实现一个浏览器开关，只需添加浏览器所需的属性……谢谢。我没想到会这么简单。在ie8中不起作用，至少在开发工具模拟器中不起作用。它使用的是滤光片而不是ms滤光片，它总是亮蓝色的。好的，谢谢。。。也许我们可以检查哪个浏览器正在访问您的站点，并使用正确的过滤器。您好，Algothym，已经尝试了一整天，这在ie8中不起作用。@JenniferMichelle但是如果您删除行

“filter”：“progid:…

，它在ie8中会起作用吗？这里的问题只是如何使用jQuery设置'-ms filter'属性。。。如果“filter”是IE8的正确属性，则不会。也许你是对的，IE8在“filter”和“-ms filter”的组合中存在问题，但是你必须实现一个浏览器开关，只需添加浏览器所需的属性……抱歉，忘了提及这一点。这只是为了查看而写的。在ms filter的实际应用中，我在应用css之前创建了一个字符串变量，并直接传递字符串变量，而不是过滤器设置。很抱歉，我忘了提及这一点。这只是为了查看而写的。在ms filter的实际应用中，我在应用css之前创建一个字符串变量，并直接传递字符串变量而不是过滤器设置。

jQuery('#iframeId').contents().find('.gradient').css({
    'background-image': '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
    'background-image': '-webkit-gradient(linear,left bottom,left top,color-stop(0,' + hex1 + '),color-stop(1,' + hex2 + '))', /* Safari & Chrome */
    'filter':  'progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=' + hex1 + ', endColorstr=' + hex2 + ')', /* IE6 & IE7 */
    '-ms-filter': "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + hex1 + "', endColorstr='" + hex2 + "')" /* IE8 */
});