应用但不支持的IE9 CSS3属性
应用但不支持的IE9 CSS3属性
提问于 2016-07-25 07:24:26
出于各种原因，我想检查浏览器是否支持CSS3动画。我不想用现代派来做这个。
我所做的是：
var el = document.getElementById('test');
el.style.animation = 'example 5s';
el.innerHTML = el.style.animation;
console.log(el.style);制作了一个div和一个动画，并通过js将该动画应用于div。然后，我继续读取div的样式，以检查动画属性是否为空(浏览器无法正确解释动画)。
这在除IE9之外的任何地方都能工作。
IE9 console.log给我看
动画“示例5s”
因此，报告样式为成功设置，即使它不能解释它。
那是怎么回事？如何确保IE9的行为符合预期的方式？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-25 08:42:40
问题是，对于不受支持的属性，浏览器只需向具有该值的style对象添加一个新的子对象。您可以将animation替换为任何东西，nonexistentProperty或其他任何东西，然后它将在所有浏览器中运行相同的功能。所以你不能用这种方式来测试合适的支持。
这个解决方案，我可耻地从这一页上偷来的：
http://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
就是在您的if ('property' in document.body.style)中使用JavaScript。
var el = document.getElementById('test');
if ('animation' in document.body.style) {
el.style.animation = 'example 5s';
el.innerHTML = el.style.animation;
console.log(el.style);
}
else
el.innerHTML = 'Sorry, no animation';@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
border: 1px solid;
}<div id="test">
tes
</div>
免责声明:我这里没有IE9，所以我不能100%的担保这个方法。不过，它在最新的浏览器中确实正确工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38561872
复制相关文章
相似问题
腾讯云开发者
