1

我想弄清楚是否可以HTML element在网站上计算 a 的面积？以像素为单位，以百分比或其他形式。

我的第一个想法是假设元素的宽度和高度为 100%，然后尝试通过HTML and CSS.

因此，如果引用的 CSS 文件中有宽度/高度属性，我可能会说 body 元素被占据 25% 区域的列所覆盖（当然，一切都基于您的屏幕分辨率 - 我仍然试图弄清楚我如何能够以编程方式做到这一点）。

或者我是否应该渲染网站并根据当时最常见的屏幕分辨率的图像进行计算）。

还有更多可能的解决方案吗？

（目前我正在尝试在 Perl 中解决这个问题，但我想任何为此目的提供库的语言都将不胜感激！）

编辑：我需要检索页面上每个元素的可视区域。例如; 如果元素顶部有<body>元素，在视觉上覆盖它，我想从<body>'s 中排除该区域，依此类推。一个简单的光线追踪，用于查找页面上每个元素的可见区域。

编辑：假设我们排除 JavaScript - 任何其他可能的方法？

4

4 回答 4

5

就个人而言，我会使用 jQuery——即使你不使用库，你最好的选择是 JavaScript 解决方案。

var $elt = $('#some-element-id'),
    height = $elt.height(),
    width = $elt.width(),
    area = height * width; // contains the area in px^2

http://api.jquery.com/height和http://api.jquery.com/width

于 2010-12-03T13:15:00.333 回答
3

这是一个如此简单的问题，如果您还没有使用它，我认为 JQuery 是不必要的。

尝试运行这个：

<div id="myParent">
   What's up?
   <div id="myDiv">Hello there!</div>
</div>

和

    var myDiv = document.getElementById("myDiv");
    alert(myDiv.offsetHeight);
    alert(myDiv.offsetWidth);

    var myParent = myDiv.parentNode;
    alert(myParent.offsetHeight);
    alert(myParent.offsetWidth);

将结果宽度相除以获得元素在其父元素中所占空间的百分比，或者简单地使用绝对像素值。

于 2010-12-03T13:40:18.337 回答
0

如果可能的话，我会推荐使用 jQuery 来做这件事。

alert('尺寸：' + $('li').size());

http://api.jquery.com/size/

于 2010-12-03T13:14:19.047 回答
0

使用javascript可行吗？如果是这样，您可以通过以下方式获得宽度/高度：

document.getElementById(YourElementsId).style.height;
document.getElementById(YourElementsId).style.width;

然而，这确实取决于元素的样式。另一种选择是

document.getElementById(YourElementsId).clientHeight;
document.getElementById(YourElementsId).clientWidth;
于 2010-12-03T13:15:27.367 回答