document.styleSheets刪除Webkit特定的CSS規則

Question

<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”，因此，如果您在台式機上執行此操作，則該規則不會出現，因為該規則實際上並不存在於瀏覽器中。

如果嘗試使用受支持的規則（如下所示）編寫代碼，則會在文檔中看到帶有供應商前綴的規則。write（）

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

document.styleSheets刪除Webkit特定的CSS規則

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-02 14:45:00

document.styleSheets刪除Webkit特定的CSS規則

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-02 14:45:00

解決方案1
1 已采納 2015-06-02 14:45:00