首页  >  文章  >  web前端  >  如何在没有渲染元素的情况下从外部样式表检索 CSS 属性?

如何在没有渲染元素的情况下从外部样式表检索 CSS 属性?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-19 05:07:02886浏览

How to Retrieve CSS Properties from External Stylesheets Without Rendered Elements?

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

问题:

可以吗从外部样式表检索 CSS 属性值,即使关联元素尚未动态渲染?常见的 jQuery 方法 $('element').css('property') 要求元素出现在页面上。有替代方法吗?

答案:

是的,可以不依赖现有元素来获取 CSS 属性值。一种方法利用 jQuery 和临时插入的元素。它的工作原理如下:

jQuery 解决方案:

  1. 使用 jQuery 创建隐藏元素,例如

    (通过 css 隐藏)。

  2. 将隐藏元素附加到页面。
  3. 使用 $('element').css('property') 访问并记录隐藏元素的 CSS 属性.
  4. 最后,从页面中删除隐藏元素。
// Scoping function just to avoid creating a global
(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

这个解决方案允许您动态访问 CSS 属性值,而无需页面上存在元素。

以上是如何在没有渲染元素的情况下从外部样式表检索 CSS 属性?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn