clientWidth
"clientWidth", "что такое clientWidth", синтаксис, живой пример.
Подрпобно о "clientWidth".
Что такое clientWidth
Свойство Element.clientWidth равно нулю для встроенных элементов и элементов без CSS; в противном случае это внутренняя ширина элемента в пикселях. Он включает отступы, но исключает границы, поля и вертикальные полосы прокрутки (если таковые имеются).
Когда clientWidth используется для корневого элемента (элемента <html>) (или для <body>, если документ находится в режиме quirks mode ), возвращается ширина области просмотра (исключая любую полосу прокрутки). Это частный случай clientWidth.
Примечание: Это свойство округлит значение до целого числа. Если вам нужно дробное значение, используйте element.getBoundingClientRect().
Наглядная иллюстрация clientWidth
Ниже представлено изображение - как работает "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") то к нему можно обратиться напрямую..., поэтому пишем так:
Аналогично поступаем с тегом, куда будем отправлять полученные данные "clientWidth" - используем innerHTML:
Соберем весь код вместе:
Пример кода clientWidth
После того, как я попытался вам рассказать весь код примера "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" прямо здесь:
Здесь результат clientWidth
