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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

使用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事件都没有做到这一点，您必须通过监视它们的加载来确保它。

以上是 使用Javascript / jQuery从外部样式表获取CSS值 的全部内容， 来源链接： utcz.com/qa/403414.html

回到顶部