Последнее обновление:
Функция javascript для определения размеров элементов и расстояний на html-странице
Иногда при работе с размерами (шириной, высотой, расстояниями по ширине или высоте) на странице html приходится использовать те или иные соответствующие функции javascript. Причем, в разных браузерах результат их работы может быть, вообще говоря, разным. Неплохо бы иметь под рукой, своего рода, быстрое пособие, шпаргалку. Что и представлено ниже.
Ниже приведен код javascript, который можно поместить в файл с расширением js (например, sizes.js), подключить его к html-странице примерно так:
<script src="http://site.ru/.sizes.js" charset="utf-8" type="text/javascript"></script>
// Определяет основные характеристики расположения элемента и body (ширины элементов)
// файл sizes.js
function width_elements_() {
var i, elem = [], offset_Left = [], offset_Width = [], offset_Width = [], client_Width = [], client_Left = [], client_X = [], scroll_Width = [], scroll_Left = [], scroll_Width = [], margin_left = [], padding_left = [], border_left = [], elem_variant = [], width = [], offsetAfter = [], offsetEnd = [], scrollPaddingRight = [], offsetParent=[] ;
var par = 'show_Left_Width_';
var div_Left_Width = document.createElement('div');
div_Left_Width.style.position = 'fixed';
div_Left_Width.style.borderStyle = 'solid';
div_Left_Width.style.borderWidth = '2px';
div_Left_Width.id = par;
div_Left_Width.style.top = '20px';
div_Left_Width.style.left = '20px';
div_Left_Width.style.width = '';
div_Left_Width.innerHTML = '';
div_Left_Width.style.backgroundColor = '#eeffea';
div_Left_Width.style.fontSize='12px';
div_Left_Width.style.fontWeight='bold';
elem[0] = document.body;
elem[1] = document.getElementById('id_div_test');
elem[2] = getComputedStyle(document.body);
elem[3] = getComputedStyle(document.getElementById('id_div_test'));
tmp_content = "<div style='display: inline-block; width: 49%; text-align: center'>Заданные стили:</div>" + "<div style='display: inline-block; text-align: center; width: 49%; margin-bottom: 5px'>getComputedStyle() :</div><br/>";
for (var j = 0; j < elem.length; j++) {
elem_variant[j] = elem[j];
i = (j % 2);
// elem_variant[1] = getComputedStyle(elem[i]);
// for (var j=0; j<2; j++){
offset_Left[j] = elem_variant[j].offsetLeft + ' ' + elem_variant[j];
offset_Width[j] = elem_variant[j].offsetWidth;
client_Width[j] = elem_variant[j].clientWidth;
client_Left[j] = elem_variant[j].clientLeft;
client_X[j] = elem_variant[j].clientX;
offsetAfter[j] = elem_variant[j].offsetAfter;
offsetParent[j] = elem_variant[j].offsetParent;
scroll_Width[j] = elem_variant[j].scrollWidth;
scroll_Left[j] = elem_variant[j].scrollLeft;
scrollPaddingRight[j] = elem_variant[j].scrollPaddingRight;
margin_left[j] = elem_variant[j].marginLeft;
padding_left[j] = elem_variant[j].paddingLeft;
border_left[j] = elem_variant[j].borderLeftWidth;
width[j] = elem_variant[j].width;
tmp_content += '<div style="padding:2px; border: solid green; display: inline-block">';
tmp_content += '<p>' + elem[i].nodeName + ', id="' + elem[i].id + '"<hr/></p><p>offsetLeft=' + offset_Left[j] + '</p><p>offsetWidth=' + offset_Width[j] +
'</p><p>scrollPaddingRight=' + scrollPaddingRight[j] +'</p><p>offsetParent='+offsetParent[j]+'</p><p>clientWidth='+client_Width[j]+
'</p><p>clientWidth=' + client_Width[j] + '</p><p>clientLeft=' + client_Left[j] + '</p><p>clientX=' + client_X[j] +
'</p><p>scrollWidth=' + scroll_Width[j] + '</p><p>scrollLeft=' + scroll_Left[j] + '</p><hr/><p>width=' + width[j] + '</p><p>marginLeft=' + margin_left[j] + '</p><p>paddingLeft=' + padding_left[j] + '</p><p>borderLeft=' + border_left[j];
tmp_content += '</div>';
// }
}
div_Left_Width.innerHTML += tmp_content;
var p_len = div_Left_Width.getElementsByTagName('p').length;
for(i=0; i < p_len; i++){
div_Left_Width.getElementsByTagName('p')[i].style.fontWeight='normal';
div_Left_Width.getElementsByTagName('p')[i].style.fontSize = '12px';
div_Left_Width.getElementsByTagName('p')[i].style.lineHeight = '130%';
div_Left_Width.getElementsByTagName('p')[i].style.margin = 0;
}
document.body.appendChild(div_Left_Width);
}
Чтобы показать на странице основные характеристики размеров body и какого-нибудь элемента (например, имеющего
id="id_div_test"), необходимо всего-навсего сделать вызов этой функции, т.е. в каком-нибудь скрипте должна быть строчка: width_elements_(); // Вызов
После чего на экране отобразится таблица с перечнем основных размеров. Запустив html-страницу в разных браузерах, можно выяснить различия в размерах и уже использовать функции для определения размеров с учетом этого. Для примера, можете нажать на кнопку ниже, которая вызывает указанный выше скрипт и посмотреть, каковы размеры в Вашем браузере.