Рассчитать площадь элемента HTML на сайте? - PullRequest
Новая
       11

Рассчитать площадь элемента HTML на сайте?

1 голос
/ 03 декабря 2010

Я пытаюсь выяснить, возможно ли рассчитать площадь HTML element на веб-сайте? В пикселях, в процентах или как угодно.

Моими первыми мыслями было сделать предположение, что элемент имеет ширину и высоту 100%, а затем попытаться получить размер с помощью сопоставления между HTML and CSS.

Так что, если в указанном CSS-файле есть атрибут width / height, я мог бы сказать, что элемент body покрыт столбцом, который занимает 25% площади (конечно, все зависит от вашего разрешения экрана - и я все еще пытаюсь выяснить, как я смогу сделать это программно).

Или я должен отрисовать веб-сайт и выполнить свои расчеты на основе изображения с наиболее распространенным в то время разрешением экрана).

Есть ли еще возможные решения?

(В настоящее время я пытаюсь решить эту проблему в Perl, но я предполагаю, что любой язык, у которого есть библиотека для этой цели, был бы признателен за информацию!)

РЕДАКТИРОВАТЬ: Мне нужно получить визуальную область для каждого элемента на странице. Например; если есть элементы поверх элемента <body>, который охватывает его визуально, я хочу исключить эту область из <body> и так далее. Простая трассировка лучей, чтобы найти видимую область для каждого элемента на странице.

EDIT: Допустим, мы исключаем JavaScript - возможны ли другие подходы?

Ответы [ 4 ]

5 голосов
/ 03 декабря 2010

Лично я бы использовал 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

3 голосов
/ 03 декабря 2010

Это такая простая проблема, я не думаю, что 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);

Разделите полученную ширину, чтобы получить% пространства, которое элемент занимает в родительском элементе, или просто используйте абсолютные значения в пикселях.

0 голосов
/ 03 декабря 2010

Можно ли было использовать javascript?Если это так, вы можете получить ширину / высоту с помощью чего-то вроде этого: 

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

Однако это зависит от того, как элементы в первую очередь отформатированы.Другой вариант будет 

document.getElementById(YourElementsId).clientHeight;
document.getElementById(YourElementsId).clientWidth;
0 голосов
/ 03 декабря 2010

Я бы рекомендовал использовать jQuery, если это возможно.

alert ('Size:' + $ ('li'). Size ());

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

...