Question

有没有办法通过Javascript获取给定CSS属性的有效值列表，或者检查您设置的值是否有效？

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

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

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

例如，在Firefox上我会在列表中获得-moz-grab，在IE上我不会获取它或任何变种。

我希望能够在需要时添加供应商前缀，并且可能有办法提供回退。

Answer 1

我知道您的问题是要求一种方法来检查供应商特定游标（以及可能的其他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;

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

CSS.supports API Browser Compatibility
CSS.supports MDN

Answer 2

我想到的一种方法是使用有效的css值预先填充数组，然后搜索 -

var validValues = {
    'textAlign': ['left', 'right', 'center', 'justify', 'start']
};

var userSpecifiedCSSValue = documet.getElementById('foo').style.textAlign.toLower();
if (validValues.textAlign.indexOf(userSpecifiedCSSValue) > -1) {
    // valid
}

注意：indexOf不适用于IE＆lt; = 8。

如果你想让它变得通用 -

var userStyle = document.getElementById('foo').style,
    userSpecifiedValue,
    allowedCSSValues;

for (cssProperty in userStyle) {

    if (userStyle.hasOwnProperty(cssProperty) && 
            validValues.hasOwnProperty(cssProperty)) {

        userSpecifiedValue = userStyle[cssProperty].toLower();
        allowedCSSValues = validValues[cssProperty]

        if (allowedCSSValues.indexOf(userSpecifiedValue) > -1) {
            // valid
        } else {
            // invalid
        }
    }
}

如果您还想包含特定于浏览器的验证，则可以根据浏览器类型创建有效值列表。只需在对象中创建另一个图层 -

var validValues = {
    'chrome': {
        'textAlign': []// arrays with values
    }
}

然而对我而言，这似乎仍然是一个黑客的解决方案。

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

2 个答案: