ウェブサイト上のHTML要素の面積を計算しますか？

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

最初の考えでは、要素の幅と高さが100％であることを前提にして、HTML and CSSの間のマッピングによってサイズを取得しようとしました。

参照されたCSSファイルにwidth/height属性があると、 body要素が領域の25％を占める列で覆われていると言えるでしょう（すべては画面の解像度に基づいています - 私はまだこれをプログラムで行う方法を理解しようとしています）。

私はウェブサイトをレンダリングし、当時の最も一般的な画面解像度の画像に基づいて計算する必要があるかどうか）。

解決策はありますか？

（現在、私はPerlでこれを解決しようとしているが、私は、この目的のためにライブラリーを持っている任意の言語を知っていただければ幸いと仮定！）

EDIT：私がする必要がありますページ上の各要素のビジュアル領域を取得します。たとえば、視覚的にカバーする要素が<body>の要素の上にある場合は、その領域を<body>のように除外したいと考えています。ページ上のすべての要素の可視領域を見つけるための単純なレイトレーシング

編集： JavaScriptを除外してみましょう - それ以外の方法は可能ですか？

出典

2010-12-03 Zolomon

これで何を達成しようとしていますか？あなたが問題の空間を記述すると、誰かがあなたが考えていない解決策を提供する可能性があります。 – Lazarus

編集済み！ – Zolomon

この作業は簡単です。 Javascriptを使わないでそれをやっているのは狂っている。 – AmbroseChapel

個人的に、私は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-03 13:15:00

CSSに何も記述されていない場合でも、JQueryは可能なhtml要素の領域を取得できますか？ – Zolomon

@Zolomon：はい、絶対に。 –

JQueryスクリプトを記述してstdinから入力を取り出し、stdoutに出力したり、データベースに送ることは可能でしょうか？ Node.js + JQuery.jsは私の騎士であることが分かります。 – Zolomon

可能であれば、jQueryを使用することをお勧めします。

alert（ 'Size：' + $（ 'li'）。size（））;

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

出典

2010-12-03 13:14:19 AndrewVos

Size（）は要素を測定しません。特定の要素の出現回数をカウントします。 http://api.jquery.com/size/ –

JavaScriptを使用することは可能でしょうか？あなたはこのようなもので、幅/高さを得ることができる場合：

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

をしかし、これは、要素が最初の場所でsytled方法にdepeningありません。別のオプションは、これは私はあなたがすでにそれを使用していない場合はjQueryの必要があるとは思えないような単純な問題である

document.getElementById(YourElementsId).clientHeight; 
document.getElementById(YourElementsId).clientWidth;

出典

2010-12-03 13:15:27 MrEyes

だろう。要素は、その親、または単に絶対ピクセル値を使用して取るスペースの％を取得するための幅を結果として

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

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

分割で

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

：

はこれを実行してみてください。

出典

2010-12-03 13:40:18

ウェブサイト上のHTML要素の面積を計算しますか？

答えて

関連する問題