Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

    И выведем здесь результат:
    Здесь текст

  2. 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>

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

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

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

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

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

    Результат:

    outerWidth() в jQuery

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

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

  4. 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>

    Результат:


Вас может еще заинтересовать список тем : #JS |
Последняя дата редактирования : 23.02.2021 00:19
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
ширина javascript ширина окна javascript javascript ширина экрана ширина элемента javascript javascript получить ширину ширина браузера javascript javascript ширина окна браузера поиск в ширину javascript как узнать ширину окна браузера javascript javascript изменить ширину asyncfileupload как получить ширину экрана javascript javascript ширина элемента в пикселях



Построение гравиков
Последние комментарии :
Марат :
08/02/2021 02:50
Всегда пожалуйста приходите ещё!
подробнее.
Павел :
08/02/2021 11:11
Спасибо большое. Очень поучительно.
подробнее.
Марат :
03/02/2021 07:22
03/02/2021Тестирование и разработка Comments+1.5 отложена на неопределенное…
подробнее.
Марат :
31/01/2021 08:31
Всегда пожалуйста!Рад, что помог!
подробнее.
Bambr :
31/01/2021 07:34
Огромное спасибо! )
подробнее.

'; ';