См. интсрукция по ruweb.
ClientWidth
14.03.2026 10:59 / Марат / Смотрели : 86 / js |"clientWidth", "что такое clientWidth", синтаксис, живой пример.
Подробно о "clientWidth".
-
Что такое clientWidth -
Собираем пример clientWidth -
Пример кода clientWidth -
Живой пример clientWidth
Свойство Element.clientWidth равно нулю для встроенных элементов и элементов без CSS; в противном случае это внутренняя ширина элемента в пикселях. Он включает отступы, но исключает границы, поля и вертикальные полосы прокрутки (если таковые имеются).
Когда clientWidth используется для корневого элемента (элемента <html>) (или для <body>, если документ находится в режиме quirks mode), возвращается ширина области просмотра (исключая любую полосу прокрутки). Это частный случай clientWidth.
Примечание: Это свойство округлит значение до целого числа. Если вам нужно дробное значение, используйте element.getBoundingClientRect().
Наглядная иллюстрация clientWidth
Ниже представлено изображение - где искать "clientWidth".
Для того, чтобы создать пример "clientWidth" вам понадобится:
<div id="example_clientwidth">Здесь example_clientwidth</div>
+ второй "div" - куда будем выводить результат полученного "clientWidth"^
<div id="here_innerhtml"></div>
Добавим нашему блоку стилей...
<style>
#example_clientwidth {
width: 200px;
height: 200px;
border: 10px solid black;
padding: 15px;
}
</style>
Далее обработаем "clientWidth" и выведем результат:
Как вы наверно знаете, что если у тега есть id(в данном примере id="example_clientwidth") то к нему можно обратиться напрямую..., поэтому пишем так:
example_clientwidth . clientWidth
Аналогично поступаем с тегом, куда будем отправлять полученные данные "clientWidth" - используем innerHTML:
here_innerhtml . innerHTML
Соберем весь код вместе:
После того, как я попытался вам рассказать весь код примера "clientWidth" - давайте весь этот код соберем в одном месте:
Html:
<div id="example_clientwidth">Здесь example_clientwidth</div>
<div id="here_innerhtml"></div>
Css:
<style>
#example_clientwidth {
width: 200px;
height: 200px;
border: 10px solid black;
padding: 15px;
}
</style>
javascript
<script>
here_innerhtml . innerHTML = example_clientwidth . clientWidth ;
</script>
Мне осталось только и всего-то разместить выше приведенный пример "clientWidth" прямо здесь:
В данном примере clientWidth = padding-left + width + padding-right = 15 + 200 + 15 = 230:
Здесь результат clientWidth
Последнние комментарии:
