1

HTML elementウェブサイト上の の面積を計算できるかどうかを調べようとしています。ピクセル単位、パーセンテージなど。

私が最初に考えたのは、要素の幅と高さが 100% であると仮定し、HTML and CSS.

したがって、参照されている CSS ファイルに幅/高さの属性がある場合、body 要素は領域の 25% を占める列で覆われていると言えます (すべてはもちろん画面の解像度に基づいています - そして私はまだプログラムでこれを行う方法を見つけようとしています）。

または、Web サイトをレンダリングし、その時点で最も一般的な画面解像度の画像に基づいて計算を行うべきかどうか)。

他に可能な解決策はありますか？

(現在、私はこれを Perl で解決しようとしていますが、この目的のためのライブラリを持っている言語について知っていただければ幸いです!)

編集:ページ上のすべての要素の視覚領域を取得する必要があります。例えば; 要素の上に要素があり、<body>視覚的にそれを覆っている場合、その領域を から除外したい<body>など。ページ上のすべての要素の可視領域を見つけるための単純なレイトレーシング。

編集: 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('Size: ' + $('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 に答える