Question

看看这个HTML, CSS and JavaScript：

<html>
    <head>
        <style type="text/css">
            body {
                -webkit-text-size-adjust: none; 
                font-size: 14px;
            }
            html{
                padding: 0;
            }
        </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $.each(document.styleSheets, function () {
            var cssRules = this.cssRules;
            if (cssRules && cssRules.length && this.href === null) {
            var css = '';
            $.each(cssRules, function () {
              css += this.cssText;
            });
                document.write(css);
            }
        });
    })
    </script>
    </head>
    <body>

    </body>
</html>

基本上，它只是通过document.styleSheets输出当前文档中使用JS读取的样式表。
现在，问题是：document.styleSheets不包含Webkit特定样式。相反，这些样式被删除在我的示例body中有-webkit-text-size-adjust: none;，但您输出的规则不在右侧那是为什么？
更重要的是：我如何通过document.styleSheets获得该规则？

Answer 1

“text-size-adjust”isn't supported by any non-mobile browsers，因此，如果您在桌面上执行此操作，则不会显示，因为浏览器确实不存在该规则。

如果您使用受支持的规则（如下所示）尝试代码，您将在document.write（）中看到带有供应商前缀的规则

body {
  -webkit-transition: all 4s ease;
  font-size: 14px;
  font-weight: bold;
}

document.styleSheets删除了Webkit特定的CSS规则

1 个答案: