Question

我最近阅读了一篇关于CSS浏览器功能检测的教程......最终产品是这样的......

var prefix = ['Moz', 'webkit', 'O', 'ms', 'Khtml'],
    test_style = document.createElement('div').style;

var css_check = function(prop) {
    if (prop in test_style) {
        return true;
    }
    for (var i = 0; i < prefix.length; i++) {
        if (prefix[i] + prop in test_style) {
            return true;
        }
    }
    return false;
};

css_check('whatev_css_property');

我不明白的部分是......

if (prop in test_style)或if (foo in bar)。

从我读过的if (foo in bar)用来检查一个值是否在一个数组中，但我可能在这里错了，我没有找到很多文档。另外，如果这用于检查数组中的值HOW是test_style = document.createElement('div').style一个数组？没有意义......

我很困惑。任何澄清将不胜感激。

Answer 1

语句if (foo in bar)测试对象bar是否具有名为 foo的属性。它不测试值为foo的属性。

那是：

var bar = {"a" : "x", "b" : "y"}; alert("a" in bar); // true alert("x" in bar); // false

您可以在数组上使用此语法，因为它们是一种对象。如果bar是一个数组，那么如果foo in bar是具有值的数组的数字索引或foo是某个其他属性或方法名称，则foo将为真

另外，如果这用于检查数组中的值，那么test_style = document.createElement('div').style数组是什么？

test_style是一个对象，而不是一个数组。

Answer 2

in运算符用于检查数组或对象中是否存在键，例如

3 in [1, 2, 3] // false, since the array indices only go up to 2
2 in [1, 2, 3] // true
'x' in { x: 5 } // true
'toString' in Object.prototype // true

style属性有一个CSSStyleDeclaration实例，其中包含活动浏览器中每个受支持的样式属性的属性。

您在帖子中提供的代码段会检查查看浏览器是否支持该样式的某些版本（官方版本或许多常见供应商前缀之一）。

Answer 3

 document.createElement('div').style

将返回具有CSS属性的对象。您可以使用key in检查对象中是否存在特定属性。

Answer 4

if (foo in bar)用于检查名为foo的值是否为对象bar的属性。由于数组只是经过特殊处理的对象，因此您可以假设它可用于检查数组中的值。

test_style = document.createElement('div').style返回一个具有属性的对象;既然如此，您可以使用foo in bar语法进行检查。

foo in bar - 'in'运算符javascript？

4 个答案: