Инструменты разработчика браузера: какова позиция элемента HTML?
Современные инструменты веб-разработчика (например, в Chrome / FF / IE) предоставляют способ просмотра "блочной модели" и "вычисленных свойств CSS" определенного элемента. Тем не мение;
Можно ли с помощью таких инструментов легко отслеживать конечную вычисленную / разметочную позицию?
Предпочтительно абсолютный, но внутри родительского контейнера также подходит. Я могу использовать любой из ранее упомянутых браузеров [Windows], но предпочитаю использовать Chrome.
2 ответа
В Chrome, Firefox, Edge и IE11+, когда элемент выбран, вы можете получить доступ к этому элементу в окне консоли, набрав:
$0
Затем вы можете выполнять запросы и манипулировать с помощью API DOM Javascript, у которого есть очень полезный метод Element.getBoundingClientRect ().
Поэтому все, что вам нужно сделать, это набрать следующее в окне консоли, когда элемент выбран:
$0.getBoundingClientRect()
и браузер вернет объект, такой как:
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
Инструменты разработчика Chrome -> Настройки -> Общие -> Элементы -> Показать линейки.
Вы также можете установить плагины Chrome, которые дадут вам немного больше функциональности.