javascript - 如何使用 javascript 获取 CSS 属性的有效值列表？

Question

有什么方法可以使用 Javascript 获取给定 CSS 属性的有效值列表或检查您设置的值是否有效？

例如:如果我尝试设置 document.getElementById('foo').style.cursor = "grab";。

没有任何反应，属性保持不变(至少在 chrome 中)。

我只想获取当前浏览器的有效值列表。

例如，在 Firefox 上，我会在列表中得到 -moz-grab，而在 IE 上，我不会得到 grab 或其任何变体。

我希望能够在需要时添加 vendor 前缀，并且可能有办法提供后备。

Answer 1

我知道您的问题是寻求一种方法来检查 vendor 特定游标(以及可能的其他 CSS 属性)的有效值，但是如果您正在寻找的只是用于样式化游标的跨浏览器解决方案，您可能只是想为有问题的光标使用您自己的图像。

http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur http://www.google.com/intl/en_ALL/mapfiles/openhand.cur

例如，您可以使用:

document.getElementById('foo').style.cursor = "url(/closedhand.cur) 4 4";

您甚至可能希望将此与检查结合使用以查看已知属性是否有效，例如:

if( window.CSS.supports('cursor','grab') )
{
  cursor = 'grab';
}
else if( window.CSS.supports('cursor', '-moz-grab') )
{
  cursor = '-moz-grab';
}
else
{
  cursor = 'url(/grab.cur)';
}
document.getElementById('foo').style.cursor = cursor;

您可以轻松扩展它以测试所有流行的 vendor 前缀，然后仅将此逻辑应用于您知道浏览器支持有限的属性。

CSS.supports API Browser Compatibility
CSS.supports MDN