在 Internet Explorer 中使用 jQuery 读取 CSS3 属性答案

【问题标题】：Reading CSS3 Proprieties with jQuery in Internet Explorer在 Internet Explorer 中使用 jQuery 读取 CSS3 属性
【发布时间】：2012-02-19 19:05:04
【问题描述】：

我正在制作一个带有 jQuery 后备的 HTML5 幻灯片，但我遇到了一些问题。我需要在所有浏览器中找到transition-duration 的值#containter，尤其是Internet Explorer，因为没有版本支持CSS3 过渡。

我正在使用这个 jQuery 来做这件事，但它在 IE 中不起作用：

$('#container').css('transition-duration')

有没有办法做到这一点？我认为问题在于 IE 甚至不加载 CSS 值，因为它不受支持。

【问题讨论】：

IE10 支持过渡。在旧版本中，您需要通过 AJAX 加载样式表，然后解析值以获取值，因为不受支持的属性不会“粘”。

标签： jquery html internet-explorer css transition

【解决方案1】：

Internet Explorer 似乎不支持转换属性。看看这个：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

发件人：http://www.w3schools.com/css3/css3_transitions.asp

但我刚刚发现了这个：

-ms-transition-property,
-ms-transition-duration, 
-ms-transition-timing-function, 
-ms-transition-delay

来自http://msdn.microsoft.com/en-us/library/windows/apps/hh466382.aspx

【讨论】：

【解决方案2】：

我不久前在这里写过这个：http://focalstrategy.com/blog/2010/08/howto/an-animated-image-slider-that-works-in-internet-explorer/。

我的技术是使用 JS 触发转换，从而可以轻松地在 JS 中设置时间值。

如果你想读取属性，你需要通过 XHR 加载样式表，然后解析它。这是一个痛苦，因为要使其健壮，您需要解析页面的 html 以获取所有样式表，并确保您观察任何媒体查询和 @import 语句。您还需要确保遵循级联并考虑到特异性。

我会按照我的方式来做，它更加灵活，并且仍然具有 CSS3 过渡的所有优点。

【讨论】：