Научный консалтинг
Главная
Контакты
Номер телефона
Как мы работаем
Гарантии
Условия
Цены

Последнее обновление:

Функция 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-страницу в разных браузерах, можно выяснить различия в размерах и уже использовать функции для определения размеров с учетом этого. Для примера, можете нажать на кнопку ниже, которая вызывает указанный выше скрипт и посмотреть, каковы размеры в Вашем браузере.

Комментарии:
Алексей25.02.2019 14:45
Хорошая статья.
Всего комментариев: 1
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация