如何从外部样式表中检索动态生成元素的 CSS 值？

使用 Javascript/jQuery 从外部样式表检索 CSS 值

而 jQuery 方法 $('element').css('property ') 是检索样式信息的便捷方法，它要求页面上存在该元素。对于动态生成且尚未存在的元素，需要采用不同的方法。

利用隐藏元素

一种策略是临时添加隐藏元素的副本元素到页面。通过访问此隐藏元素的样式，您可以检索所需的 CSS 值。此方法可以使用以下代码实现：

(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

但是，这种方法引入了不必要的 DOM 操作，可能会影响页面性能。

使用 jQuery 的替代方法

另一种解决方案利用 jQuery 的 $.getStyle() 函数，它允许您直接访问样式属性的值来自选择器字符串或元素对象，而不将其渲染在页面上：

$.getStyle("p", "color");

此方法提供了一种更清晰、更有效的方法来检索动态生成的元素的 CSS 值。

以上是如何从外部样式表中检索动态生成元素的 CSS 值？的详细内容。更多信息请关注PHP中文网其他相关文章！