Question

当假设对象是网页（在同一网站上）时，我只需要获取对象标签内容的高度。

我提前感谢任何帮助。

谢谢你们！我知道有办法做到这一点。

修改

<object id="blogs-and-stuff" data="blog/index.php" class="blog-stuff" type="text/html" style="width:900px; margin-left:50%;">

我希望index.php的高度在前面，而不是“.blog-stuff”的高度。

$(".blog-stuff").height() //does not return what I need.

编辑编辑

我试图抓住对象标签内的网页高度并将其应用于对象标签。这将增加对象的大小以显示其持有的整个网页而不是使用滚动条。溢出不按计划运行。 This screen shot shows only the object with the webpage in it

抱歉这些混乱的人。

Answer 1

访问Object

的内容

真正的挑战似乎是如何访问Object元素的内容。我找到的解决方案是使用contentDocument元素的object属性。我整理了一个小测试用例，您可以在其中记录object内容的高度。

document.getElementById("object_id").contentDocument.body

在尝试访问其高度之前，请确保已加载object内容。

<object id="test" data="test.html" ></object>
<button id="button">Log height</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $("#button").click(function() {
         console.log(document.getElementById("test").contentDocument.body.getBoundingClientRect().height)
    });
</script>

但是，如果尝试在对象中加载外部URL，则会遇到问题。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

然后有一些不同的方法可以获得HTML元素的高度。

纯JavaScript选项：

的 element.style.height 的

document.getElementById("input_id_here").style.height;

描述：


height CSS属性指定内容区域的高度   元件。内容区域位于填充，边框和边距内   元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/height

的 element.getBoundingClientRect（）。高度 的

element.getBoundingClientRect().height

说明


返回包含一组文本的文本矩形对象   矩形。

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

的 element.clientHeight 的

element.clientHeight;

描述：


以像素为单位返回元素的内部高度，包括填充   但不是水平滚动条的高度，边框或边距。

clientHeight可以计算为CSS高度+ CSS填充 - 高度为   水平滚动条（如果存在）。

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

的 HTMLelement.offsetHeight 的

document.getElementById("input_id_here").offsetHeight;

描述：


元素相对于元素的offsetParent的高度。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

jQuery选项

*的高度（ “input_selector_here”）*

$("input_selector_here").height()

描述：


获取第一个元素的当前计算高度   匹配元素的集合。

https://api.jquery.com/height/

的 outerHeight（） 的

$("input_selector_here").outerHeight()

描述：


获取第一个元素的当前计算高度   匹配元素的集合，包括填充，边框和可选   余量。返回值的数字（不带“px”）表示   如果在一组空元素上调用，则返回null。

https://api.jquery.com/outerHeight/

的 innerHeight（） 的

$("input_selector_here").innerHeight()

描述：


获取第一个元素的当前计算高度   匹配元素的集合，包括填充但不是边框。

https://api.jquery.com/innerHeight/

Answer 2

我不喜欢jQuery所以我的答案将使用原生的javascript ....

document.getElementById('your-object-id').getBoundingClientRect().height;

Answer 3

Jquery非常适合这个...如果我明白你的要求

var h = $(".class").css("height")

.class应该是您想要的类或类型或任何jquery选择器。

更多信息here

Answer 4

document.getElementsById("myObject").style.height
document.getElementsById("myObject").getBoundingClientRect().height
$("#myObject").css("height")
$("#myObject").height()

选择一个

Answer 5

document.getElementsById("object").style.height

这应该是最快的解决方案，因为它不像其他jQuery解决方案那样依赖额外的函数调用。

如何抓取对象标签内容的高度

5 个答案:

访问Object

纯JavaScript选项：

jQuery选项