-MS-滤波器通过jQuery用于梯度在IE8(-ms-filter for gradient in

2019-10-29 12:38发布

我尝试这种颜色控制面板,用户可以改变它的外表和感觉使用控制面板中的幻灯片页面上。 的增加的复杂性在于,滑入面板是在作为所述变化到所发出的网页是在iframe内父窗口。 我想更改生效,因为它们是在控制面板里面做。 为此,我不想使用AJAX。 为此,我已经设计了一种算法,它是工作的罚款。

一切的除了与IE8的一个问题是工作的罚款。 在加载页面时,我正在使用的CSS为默认这种风格的定义。

(感谢路易斯拉扎里斯- http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ )

background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

现在,这是我想使用jQuery(hex1和hex2是包含渐变的两种十六进制值的两个变量)在JavaScript中执行:

jQuery('#iframeId').contents().find('.gradient').css(
{
        backgroundImage: '-moz-linear-gradient(top,' + hex1 + ',' + hex2 + ')', /* Firefox 3.6 */
        backgroundImage: '-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 */
});

代码如果我排除-MS-过滤器的最后一个条件(因为根据文档我读无处是它提到,如果该过滤器是由jQuery.css支持)运行正常。 对于我所看到的一个解决我的问题是使用的是看我的浏览器的名称和版本

navigator.userAgent

如果是的“Internet Explorer 8.0”我申请单的背景颜色。

现在我的问题是,有没有其他的办法去解决这个和IE8获得梯度也?

Answer 1:

还存在另一种语法来设置CSS与jQuery。 有以下尝试

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 */
});


Answer 2:

你有什么问题你的JavaScript。 为对象的关键-ms-filter应该用双或单支架或它会导致一个语法错误。



文章来源: -ms-filter for gradient in IE8 via jquery