使用Javascript / jQuery从外部样式表获取CSS值

Question

如果样式所引用的元素尚未生成，是否可以从页面的外部CSS获取值？（该元素将动态生成）。

我见过的jQuery方法是$('element').css('property');，但这依赖于element页面上。有没有办法找出CSS中属性设置为什么，而不是元素的计算样式？

我是否需要做一些丑陋的事情，例如在页面上添加元素的隐藏副本，以便可以访问其样式属性？

Answer 1

使用jQuery：

// Scoping function just to avoid creating a global

(function() {

    var $p = $("<p></p>").hide().appendTo("body");

    console.log($p.css("color"));

    $p.remove();

})();


p {color: blue}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

直接使用DOM：

// Scoping function just to avoid creating a global

(function() {

    var p = document.createElement('p');

    document.body.appendChild(p);

    console.log(getComputedStyle(p).color);

    document.body.removeChild(p);

})();


p {color: blue}

注意：
在这两种情况下，如果要加载外部样式表，都将等待它们加载，以查看它们对元素的影响。jQuery的事件ready和DOM的DOMContentLoaded事件都没有做到这一点，您必须通过监视它们的加载来确保它。