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

Question

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

我正在使用 jQuery 来执行此操作，但它在 IE 中不起作用：

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

有什么方法可以做到这？我认为问题是 IE 甚至不加载 CSS 值，因为它不受支持。

Answer 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

Answer 2

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

我的技术是使用 JS 触发转换，这样就可以轻松地在 JS 中设置计时值。

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

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