Далее на странице...
- Cвойства clientWidth и clientHeight Размер элемента внутри рамок border Размеры одержимого вместе с padding, но без прокрутки
- clientWidth/Height + box-sizing
- Cвойства offsetWidth и offsetHeight Полный размер - внешняя ширина и высота, включая рамки
- offsetWidth/Height + box-sizing
- Свойства scrollWidth и scrollHeight Аналоги clientWidth и clientHeight - но с учётом прокрутки
- scrollWidth/Height + box-sizing
- scrollHeight - Распахнуть элемент на всю высоту
- Свойства scrollLeft и scrollTop Ширина и высота прокрученной в данный момент части элемента
- document.documentElement - Ширина окна браузера
- scrollLeft и scrollTop - Можно изменять
- scrollBy и scrollTo - Прокрутка страницы scrollBy - прокручивает страницу относительно её текущего положения scrollTo - прокручивает страницу на абсолютные координаты
- Метод getBoundingClientRect - Координаты элемента Возвращает размер элемента и его координаты относительно окна
- getComputedStyle - Фактическое значение свойства Возвращает фактическое значение CSS-свойств
- getComputedStyle - Стили псевдоэлементов В JS нельзя получить сам псевдоэлемент! Но есть возможность работать со стилями псевдоэлементов
Window - это основной объект JavaScript. И он же глобальный объект браузера. Window также может рассматриваться как корень объектной модели документа DOM.
window.document или просто document - это основной объект визуализированной/видимой объектной модели документа DOM. document содержит -структуру.
window.screen или просто screen - это небольшой информационный объект о физических размерах экрана. Немного о screen.
В консоли при помощи команды console.dir можно посмотреть все свойства любого объекта.
Далее пойдет речь о размерах элементов DOM.
Cвойства clientWidth и clientHeight
Свойства clientWidth и clientHeight - обозначают размер элемента внутри рамок border.
Это ширина и высота содержимого вместе с полями padding, но без прокрутки.
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--noindex-->
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus inventore, repudiandae laborum dolorem fuga repellendus dignissimos excepturi error sapiente laudantium, doloribus ut dolores ad autem quidem quis accusamus voluptas quae. Quam iusto sapiente quaerat dolorum blanditiis accusantium eligendi quas assumenda. Nostrum, ipsa dolorum repellat rem laborum voluptatibus ratione officiis illo quisquam optio perspiciatis accusamus tenetur, voluptate eligendi quibusdam incidunt, dolore repellendus error quis itaque libero nobis, provident voluptates dolor. Facilis exercitationem itaque eos consectetur vel incidunt nostrum cupiditate illo sunt, tenetur nihil laboriosam ratione in quas blanditiis natus doloremque aliquid rem nam, similique illum vero consequuntur labore sapiente? Perferendis veniam provident magni repellendus ad veritatis quod unde vero animi, aut quis suscipit ipsa asperiores enim, qui blanditiis ratione accusamus mollitia perspiciatis consectetur officiis eius aliquam. A adipisci at repellat impedit. Eaque ad, eum laudantium deserunt. Quis error voluptatem tempora quam ducimus aut, architecto odio voluptatum reiciendis. Atque error, deleniti similique non nam ratione. Perferendis, officiis mollitia laboriosam quam, nisi vel obcaecati vero dicta ducimus dolorum quas, excepturi consequatur fugiat sit minima repellendus quia aliquid numquam id autem unde dolorem quaerat odit. Harum eaque dolor dicta, accusantium deserunt eius deleniti nisi quas assumenda consectetur, odit modi exercitationem, officia doloribus quidem perferendis repellendus quos commodi eveniet cum beatae ea molestiae reprehenderit. Facilis, iste corporis earum. Nemo aliquam architecto error facilis amet, nihil sed excepturi necessitatibus rem delectus, omnis ipsa ut temporibus expedita quas natus ipsum fuga eum harum nisi facere cupiditate reiciendis! Id magnam blanditiis eligendi, nulla accusamus magni. Placeat quidem repellat explicabo minus esse numquam velit, accusantium a, cumque aperiam iure alias natus aliquam minima quas possimus assumenda quod, doloremque saepe perspiciatis nulla vero quibusdam voluptates. Nihil, aliquam maiores earum non similique quos? Quos cumque est illum assumenda perspiciatis, obcaecati atque doloribus cum soluta sit qui, deserunt reprehenderit quibusdam ratione odio similique a, quod cupiditate! Accusamus hic minus numquam, repellendus, ullam beatae itaque ad laudantium doloremque dolore error praesentium provident consequuntur consectetur culpa necessitatibus facere. Adipisci dignissimos fugiat consequuntur temporibus magni eius deleniti. Reiciendis, distinctio nesciunt modi repellendus aperiam quia dolore porro, pariatur eos. Ducimus iusto officiis cupiditate, error modi eius, dolores maxime a eaque tenetur? Quae nulla reprehenderit voluptatibus fugit cum distinctio hic libero maiores fugiat, atque amet qui cupiditate pariatur quaerat illo similique sunt doloribus modi reiciendis blanditiis in voluptatem esse. Hic voluptates atque beatae nihil ad perspiciatis repudiandae, consequuntur non nesciunt maiores alias eos odit, officiis inventore eaque aperiam voluptatibus. Fugiat eum esse nam saepe soluta ab accusamus nemo fuga aut, distinctio officia atque. Voluptatibus perspiciatis magni harum incidunt aliquid temporibus quas labore exercitationem. Alias mollitia magnam sequi, totam corrupti temporibus facere praesentium iste velit aliquam minus enim cupiditate rem. Iste molestiae maxime illum non accusantium voluptas blanditiis, quod consectetur, quidem est culpa voluptates obcaecati, ipsum ab natus vitae! Consectetur animi quae tenetur odio repellendus natus tempora ipsa culpa, inventore accusamus ea corporis doloribus id harum voluptatem, praesentium temporibus, explicabo totam mollitia molestiae est iusto vel repellat molestias. Repellat placeat voluptas quaerat eaque, illum dicta rerum numquam sunt!</div><!--/noindex-->
<button>Click</button>
<script src="script.js"></script>
</body>
</html>
Пример №1 - НЕТ свойства box-sizing: border-box
CSS-код
.box {
/* box-sizing: border-box; */
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
border: red solid 5px;
}
button {
width: 100px;
height: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
JavaScript-код
'use strict';
const box = document.querySelector('.box');
console.log(box.clientWidth);
console.log(box.clientHeight);
Результат в Браузере
Файл CSS: width: 400px; height: 350px; padding: 10px.
В результате: offsetWidth: 405 и offsetHeight: 355.
Ширина и высота содержимого вместе с полями padding, но без прокрутки.
Размеры содержимого блока увеличиваются на ширину полей padding, но также учитывается, что в эти размеры НЕ входит полоса прокрутки, шириной 15px.
Ширина полосы прокрутки в разных браузерах может различаться. Результат браузер Ghrome: clientWidth: 403 и clientHeight: 353.
clientWidth/Height + box-sizing
В CSS-файле свойство box-sizing: border-box присутствует.
Пример № 1.2 - ЕСТЬ свойство box-sizing: border-box
CSS-код
.box {
box-sizing: border-box;
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
border: red solid 5px;
}
button {
width: 100px;
height: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
JavaScript-код
'use strict';
const box = document.querySelector('.box');
console.log(box.clientWidth);
console.log(box.clientHeight);
Результат в Браузере
Файл CSS: width: 400px; height: 350px; padding: 10px; border: 5px.
В результате: clientWidth: 375 и clientHeight: 325.
Размеры содержимого блока НЕ увеличиваются на ширину полей padding, а также учитывается, что в эти размеры НЕ входит полоса прокрутки, шириной 15px и размер границы 5px с каждой из сторон, то есть еще - 10px для clientWidth и clientHeight.
Ширина полосы прокрутки в разных браузерах может различаться. Результат браузер Ghrome: clientWidth: 373 и clientHeight: 323.
Cвойства offsetWidth и offsetHeight
Свойства offsetWidth и offsetHeight - содержат полный размер элемента, его внешнюю ширину и высоту, включая рамки.
Пример №1 - НЕТ свойства box-sizing: border-box;
CSS-код
.box {
/* box-sizing: border-box; */
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
border: red solid 5px;
}
button {
width: 100px;
height: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
JavaScript-код
'use strict';
const box = document.querySelector('.box');
console.log(box.offsetWidth);
console.log(box.offsetHeight);
Результат в Браузере
Файл CSS: width: 400px; height: 350px; padding: 10px; border: 5px.
В результате: offsetWidth: 430 и offsetHeight: 380.
Полный размер элемента вместе с полями padding + границы.
offsetWidth/Height + box-sizing
Если в CCS-файле со стилями есть свойство box-sizing: border-box, то в результате значения свойств offsetWidth/offsetHeight такие же, как и у width и height: offsetWidth: 400; offsetHeight: 350.
Результат в Браузере
Свойства scrollWidth и scrollHeight
Свойства scrollWidth и scrollHeight – это аналоги свойств clientWidth и clientHeight, но с учётом прокрутки.
Если свойства clientWidth и clientHeight относятся только к видимой области элемента, то scrollWidth и scrollHeight добавляют к ней прокрученную область (которую не видно) по горизонтали и по вертикали.
CSS-код
.box {
/* box-sizing: border-box; */
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
border: red solid 5px;
}
button {
width: 100px;
height: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
JavaScript-код
'use strict';
const box = document.querySelector('.box');
console.log(box.scrollWidth);
console.log(box.scrollHeight);
Результат в Браузере
Файл CSS: width: 400px; height: 350px; padding: 10px.
clientWidth: 405 и clientHeight: 355.
scrollWidth: 405 и scrollHeight: 1298.
scrollHeight: 1298 – полная внутренняя высота элемента, включая прокрученную область.
scrollWidth: 405 – полная внутренняя ширина, в данном случае прокрутки нет, поэтому она равна clientWidth.
scrollWidth/Height + box-sizing
CSS-код
.box {
box-sizing: border-box;
width: 400px;
height: 350px;
overflow: scroll;
margin: 0 auto;
margin-top: 50px;
padding: 10px;
border: red solid 5px;
}
button {
width: 100px;
height: 40px;
display: block;
margin: 0 auto;
margin-top: 20px;
}
Результат в Браузере
clientWidth: 375 и clientHeight: 325.
scrollWidth: 375 и scrollHeight: 1406.
scrollHeight - Распахнуть элемент на всю высоту
Свойства scrollWidth и scrollHeight можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту.
JavaScript-код
'use strict';
const box = document.querySelector('.box'),
btn = document.querySelector('button');
btn.addEventListener('click', () => {
box.style.height = box.scrollHeight + 'px';
});
Результат в Браузере
Свойства scrollLeft и scrollTop
Свойства scrollLeft и scrollTop – ширина и высота прокрученной в данный момент части элемента слева и сверху.
JavaScript-код
'use strict';
const box = document.querySelector('.box'),
btn = document.querySelector('button');
btn.addEventListener('click', () => {
console.log(box.scrollTop);
});
Результат в консоли
0
200
500
Результат в Браузере
Каждый раз, при клике по кнопке в консоли мы будем видеть, сколько текста прокручено/прочитано внутри элемента box.
document.documentElement - Ширина окна браузера
Рассмотренные выше свойства можно использовать, чтобы найти ширину окна браузера или узнать всю высоту страницы, с учётом прокрутки.
С позиции , документ – это document.documentElement.
Свойства clientWidth и clientHeight для document.documentElement– это ширина и высота видимой области окна.
Результат в Браузере
JavaScript-код
'use strict';
console.log(document.documentElement.clientWidth);
Результат в консоли
1349
1349 – это ширина видимой области окна у экрана с разрешением 1366x768.
scrollLeft и scrollTop - Можно изменять
Свойства scrollLeft и scrollTop – можно изменять.
В отличие от свойств, рассмотренных выше, значения scrollLeft и scrollTop можно изменять.
И браузер выполнит прокрутку элемента.
Пример с консолью
document.documentElement.scrollTop
900
Для примера нужно перейти на произвольную веб-страницу, немного прокрутить ее вниз и выполнить в консоли document.documentElement.scrollTop.
Допустим, в результате мы получили .
Если после этого для document.documentElement.scrollTop присвоить значение 0, то браузер выполнит прокрутку страницы вверх и в консоли будет 0.
document.documentElement.scrollTop = 0
0
scrollBy и scrollTo - Прокрутка страницы
Обычные элементы можно прокручивать, изменяя scrollTop и scrollLeft.
Метод window.scrollBy принимает два аргумента и прокручивает страницу относительно её текущего положения.
Пример с консолью
window.scrollBy(0, 700)
Этой командой браузер выполнит прокрутку страницы вниз (по оси y) на 700px относительно её текущего положения.
Метод window.scrollTo принимает два аргумента и прокручивает страницу на абсолютные координаты.
Левый верхний угол браузера имеет указанные координаты относительно левого верхнего угла документа.
Пример с консолью
window.scrollTo(0, 300)
Прокрутка вниз на 300px, если мы находимся вначале страницы. Или прокрутка вверх (если мы находимся в середине/внизу веб-документа) до положения 300px относительно верхнего края окна браузера.
Метод getBoundingClientRect - Координаты элемента
Метод Element.getBoundingClientRect() возвращает размер элемента и его координаты относительно окна.
JavaScript-код
'use strict';
const box = document.querySelector('.box');
console.log(box.getBoundingClientRect());
Результат в Браузере
Результат в консоли
DOMRect {x: 190.5, y: 50, width: 430, height: 380, top: 50, …}
bottom: 430
height: 380
left: 190.5
right: 620.5
top: 50
width: 430
x: 190.5
y: 50
.
.
.
Обратить внимание: свойство right метода getBoundingClientRect() возвращает расстояние от левой границы окна браузера до правой границы элемента.
В то время как CSS-свойство right устанавливает расстояние от правого края окна браузера до правой границы элемента.
То же самое можно сказать о свойстве bottom метода getBoundingClientRect() и CSS-свойстве bottom.
getComputedStyle - Фактическое значение свойства
Метод getComputedStyle - возвращает фактическое значение CSS-свойств.
Их можно увидеть в Инструментах разработчика - вкладка Elements -> Computed.
Здесь собраны все стили, которые применились к элементу: не только те, которые указали для элемента, но и те, которые добавились к элементу из наследуемых свойств, а также свойств по умолчанию в браузере.
CSS-свойсва Elements -> Computed - нельзя изменить.
JavaScript-код
'use strict';
const box = document.querySelector('.box');
const style = window.getComputedStyle(box);
console.log(style);
console.log(style.display);
Результат в Браузере
В результате в консоли мы получим объект CSSStyleDeclaration, который содержит список из всех свойств для данного элемента.
Также есть возможность получить значение какого-либо одного свойства.
getComputedStyle - Стили псевдоэлементов
В JS нельзя получить сам псевдоэлемент, но есть возможность работать со стилями псевдоэлементов.
Метод getComputedStyle может принимать 2 аргумента и, таким образом, позволяет получить стили псевдоэлементов.
getComputedStyle(element, [pseudo]);
element - элемент, значения для которого нужно получить.
pseudo - указывается, если нужен стиль псевдоэлемента. Не обязательный аргумент.
