{x:expression(...)}是什么意思？

Question

4

我发现了这个针对IE7的querySelectorAll的polyfill：

我曾认为自己在JavaScript方面还行，但我从未见过类似于polyfill第9行引用部分的东西：

{x:expression(document.__qsaels.push(this))}

显然，这是一个JavaScript对象，具有键x和值expression（document.__qsaels.push（this）），但除此之外，我不知道其他的。这个expression函数是做什么的？我在谷歌上找不到任何相关的东西。

- Stack0verflow

请注意，x 的值不是表达式函数，而是其结果。 - Diego

1

我知道代码正在附加到样式表中，但不确定原因。 - Mike Cluck

@MikeC：是的，我明白。 - Stack0verflow

这个类似的问题提供了指向CSS表达式的指针，并引用了http://stackoverflow.com/questions/25594395/how-does-this-polyfill-work-for-document-queryselectorall。 - kiran

谢谢你挖掘出来。之前有人已经偶然发现了它。 - Stack0verflow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

您正在查看生成的 CSS 规则。它不是 JavaScript 对象，而是 CSS 声明块。

这一行

styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";

将CSS选择器和声明块连接成一个CSS字符串。声明块包含一个名为x的虚拟CSS属性，其值为expression(document.__qsaels.push(this))。

expression()是旧版本IE的一个非标准特性，允许作者直接执行任意JavaScript并获取在CSS中使用的值。因此，尽管整个字符串是CSS声明块，document.__qsaels.push(this)实际上是一个JavaScript表达式。

该表达式的作用是将匹配CSS选择器的任何元素推送到__qsaels数组中，以便Polyfill可以将其返回为选择器匹配的元素集合。¹ 实质上，这就是Polyfill的工作原理。

举个具体的例子，调用Polyfill的 document.querySelectorAll（“.foo”） 将导致IE7将以下CSS追加到文档样式表中：

.foo{x:expression(document.__qsaels.push(this))}

在一定缩进和换行的情况下，使其类似于传统的CSS：

.foo {
  x: expression(document.__qsaels.push(this))
}

在这里，您可以看到此CSS规则将适用于与.foo匹配的任何元素，在返回之前将每个元素添加到__qsaels中。

¹_{不知为何，即使是在未知属性上（据我所知，即使在IE7上也没有名为x的属性），IE似乎也很高兴执行expression()语句。}