Question

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

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

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

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

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

Answer 1

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

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

FIDDLE

Answer 2

不，不是使用jquery，因为只有在插入DOM后才能从div中获取属性。

Answer 3

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

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。

Answer 4

嗯，有几种方法可以做到这一点。如果你想阅读样式表值，你需要通过document.styleSheets对象找到你的选择器，找到一个带有一个属性的样式表，代码看起来像这样（你可能需要编写代码来搜索一个类名）返回的对象）：

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

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

或者简单地将元素添加到屏幕外某处的DOM（例如在顶部边距设置为-9000px的容器中）/或作为空元素，并使用jquery height（）或css获取添加元素的高度（）方法。

Answer 5

我所做的是在

中创建div

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

</div>

因此我可以在DOM中引用它而不会显示它。一旦我完成了操作，就把它移到我想要的任何地方。

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

5 个答案: