读取尚未添加到 DOM div 的 CSS 属性答案

【问题标题】：Read a CSS property of a not-yet added to the DOM div读取尚未添加到 DOM div 的 CSS 属性
【发布时间】：2012-08-12 06:31:35
【问题描述】：

如果我理论上是从 ajax 调用中获取以下 HTML：

<div class="super">
    <span> Some Content </span>
</div>

并将其包装在 jquery 对象 $data 中，我可以使用 div 进行操作，但它尚未添加到 DOM，直到我通过一些操作函数调用插入它。

在链接的 css 文件中，我有 super css 类的宽度和高度设置。

有没有办法让我读取元素添加时的宽度和高度？

【问题讨论】：

这将是一个巧妙的技巧。当然，问题在于 CSS 是级联的。您必须自己解析 CSS 并找出浏览器将对其应用的所有修改。
不，因为它还不是 DOM 对象，并且 CSS 文件引用了 DOM 节点。所以这些属性还没有设置为 .super div

标签： jquery css dom

【解决方案1】：

嗯，有几种方法可以做到这一点。如果您想读取样式表值，您需要通过 document.styleSheets 对象并在那里找到具有一个属性的样式表的选择器，代码将如下所示（您可能需要编写代码来搜索类名返回的对象）：

<style>
        .super {
            height: 200px;
        }

    </style>
<script>
document.styleSheets[0].cssRules[0].style.height
</script>

或者，只需将元素添加到屏幕外某处的 DOM（例如在上边距设置为 -9000px 的容器中）/或作为空元素并使用 jquery height() 或 css( ) 方法。

【讨论】：

【解决方案2】：

我所做的是在

中创建 div

<div id="sandbox" style="display:none;">

</div>

这样我就可以在不可见的情况下在 DOM 中引用它。一旦我在那里完成了对它的操作，就可以将它移动到我想要的任何地方。

【讨论】：

【解决方案3】：

只需创建一个具有相同类的假元素，将其插入 DOM，获取样式并删除元素：

var elem = $("<div class='super'></div>"),
    width = elem.appendTo('body').css('width');
    elem.remove();

FIDDLE

【讨论】：

【解决方案4】：

最好的方法是使用“超级”类创建隐藏元素，然后使用：

var width = $('.super').css('width');
var height = $('.super').css('height');

所以，你可以这样做：

var $element = $('<div class="super"><span></span></div>').hide().appendTo("body");
var width = $element.css('width');
var height = $element.css('height');
$element.remove();

有一个熟悉的线程：Get a CSS value from external style sheet with Javascript/jQuery。

【讨论】：

【解决方案5】：

不，不使用 jquery，因为您只能在将 div 插入 DOM 之后从 div 中获取属性。

【讨论】：

即使是纯 JavaScript 也不行。