这个polyfill如何为document.queryselectorall工作？ [英] How does this polyfill work for document.queryselectorall?

问题描述

我正在尝试将此polyfill理解为queryselectorall？特别是这一行：

I'm trying to understand this polyfill for queryselectorall? Specifially this line:

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

https://gist.github.com/connrs/2724353

if (!document.querySelectorAll) {
    document.querySelectorAll = function(selector) {
        var doc = document,
            head = doc.documentElement.firstChild,
            styleTag = doc.createElement('STYLE');
        head.appendChild(styleTag);
        doc.__qsaels = [];

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

        return doc.__qsaels;
    }
}

推荐答案

它滥用 表达式功能的CSS。在计算 x 属性的样式时（在由 scrollBy（0,0）触发的重排上发生）， Internet Explorer将为与选择器匹配的所有元素执行此代码段。

It is abusing the expression "feature" of CSS. When computing the style of the x property (which happens on the reflow triggered by scrollBy(0, 0)), Internet Explorer will execute this snippet for all elements that match the selector.

自IE 8以来，CSS表达式被正式鄙视

这篇关于这个polyfill如何为document.queryselectorall工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！