Размер ширины окна в JavaScript

Ширина окна - это может быть ширина окна браузера, либо ширнина вообще монитора. Если способы определить ширину окна любого элемента с помощью javascript

Подробно о ширине окна в javascript

1. Вывести с помощью clientWidth ширину body
2. innerWidth — внутренняя ширина окна.
3. outerWidth — наружная ширина окна.
4. screen.width и screen.availWidth - ширина экрана

Вывести с помощью clientWidth ширину body

Предположим, что нам требуется найти текущую ширину окна, которое занимает тег "body"

Для этого мы можем воспользоваться свойством:

clientWidth

Для "body" эта конструкция будет выглядеть так:

document.body.clientWidth

Далее нам потребуется как-то вывести результат работы "clientWidth" - это document.write

После этого соберем весь код вместе добавим туда еще и "script"

<script>document.write(document.body.clientWidth);</script>

Результат получения ширины, которое занимает body:

Разместим выше приведенный пример прямо здесь.

Вывод о clientWidth:

Как мы здесь видим, что ширина body прекрасно определилась !

Теперь давайте это применим к другому элементу DOM-a

Пусть это будет div добавим id + style + width и border и получим:

<div id="is_id" style="width:500px; border: 1px solid">Здесь текс</div>

Далее script + getElementById("is_id")

<script> document.write(document.getElementById("is_id").clientWidth);</script>
И выведем здесь результат:
Здесь текст



InnerWidth — внутренняя рабочая часть окна.

Как мы будем использовать "innerWidth" - для определения внутренней ширины окна браузера.

Нам понадобится:

Тег script, внутрь помещаем document.write и уже во внутрь "innerWidth"

Соберем эту всю конструкцию вместе:

<script>document.write(innerWidth);</script>
Разместим данный код прямо здесь:
Вывод о innerWidth:

Как мы видим из результата, "innerWidth" получил ширину внутреннюю окна браузера.

---

Использование innerWidth для определения ширины другого элемента на сайте

Как я не пытался использовать "innerWidth" через чистый "javascript" для того, чтобы узнать ширину другого объекта - увы, у меня не получилось!

НО!

Мы можем использовать innerWidth() в jQuery

Выше мы уже использовали этот div и его же и будем использовать.

<div id="is_id" style="width:500px; border: 1px solid">Здесь текс</div>

Не забываем, что нужно подключить jquery

Получаем объект - это равносильно "document.getElementById("is_id")"

$( "#is_id" )

Далее добавляем :

innerWidth()

И чтобы вывести результат :

document.write

Соберем весь код получения ширины блока через innerWidth() в jQuery

<div id="is_id" style="width:500px; border: 1px solid">Здесь текст </div>

<script> document.write( $( "#is_id" ).innerWidth() ) ;</script>

Результат выведем прямо здесь:




OuterWidth — наружная ширина окна.

outerWidth - отличается от выше приведенного пункта тем, что это свойство определяет ширину наружного блока.

Проделаем абсолютно те же действия, что и в предыдущем пункте только заменим "innerWidth" на "outerWidth"

<script>document.write(outerWidth );</script>

Результат:

OuterWidth() в jQuery

Также меняем "innerWidth" на "outerWidth"

<script> document.write( $( "#is_id" ).outerWidth () ) ;</script>
Получаем результат:



Screen.width и screen.availWidth - ширина экрана

К 4 пункту... я как-то притомился..., но у нас остались еще "screen.width" и screen.availWidth

Screen.width — разрешение экрана по горизонтали.

<script>document.write(screen.width);</script>

Результат:

Screen.availWidth

screen.availWidth — доступная область эркана для окон. Не учитывает служебные панели операционной системы, например, панель задач в Windows.

<script>document.write(screen.availWidth);</script>

Результат: