Ця стаття є дзеркальною статтею машинного перекладу, будь ласка, натисніть тут, щоб перейти до оригінальної статті.

Вид: 9486|Відповідь: 0

[JavaScript] Javascrip{filter}t отримує параметри розміру сторінки та екрану

[Копіювати посилання]
Опубліковано 03.07.2018 16:54:42 | | |
Javascrip{filter}t показує розмір екрану, вікна браузера, браузера та висоти та ширини веб-сторінки

Область видимості веб-сторінки: document.body.clientWidth
Область видимості веб-сторінки: document.body.clientHeight
Ширина видимої площі веб-сторінки: document.body.offsetWidth (включно з шириною ребра)
Висота видимої області веб-сторінки: document.body.offsetHeight (включно з шириною ребра)
Повна ширина тексту тіла веб-сторінки: document.body.scrollWidth
Повний текст веб-сторінки є високою: document.body.scrollHeight
Сторінка прокручена вгору: document.body.scrollTop
Сторінка прокручена вліво: document.body.scrollЛіворуч
У тілі веб-сторінки: window.screenTop
Основна частина вебсторінки знаходиться зліва: window.screenLeft
Висока роздільна здатність екрана: window.screen.height
Ширина роздільної здатності екрана: window.screen.width
Висота доступного робочого простору: window.screen.availHeight
Ширина доступного робочого простору екрану: window.screen.availWidth

jQuery отримує різні ширини та висоти

Область перегляду браузера
$(вікно).висота()
$(вікно).ширина()

Розмір документа сторінки
$(document).height()
$(документ).ширина()

Розмір поточного тіла віконного документа
$(документ.тіло).висот()
$(документ.тіло).ширина()

Вертикальна висота смутку прокрутки вгору (тобто висота, на якій сторінка згортається)
$(document).scrollTop()
$(document).scrollLeft()

Точне таргетування в HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX відносно горизонтальних координат документа
event.clientY відносно вертикальних координат документа
event.offsetX відносно горизонтальних координат контейнера
event.offsetY відносно вертикальних координат контейнера
document.documentElement.scrollМаксимальне значення для вертикальної прокрутки
event.clientX+document.documentElement.scrollTop Кількість горизонтальних координат + вертикальне прокручування відносно документа

Тобто відмінності FireFox такі:

IE6.0、FF1.06+:

clientWidth = ширина + заповнення

clientHeight = висота + наповнення

зсувШирина = ширина + заповнення + межа

offsetHeight = висота + заповнення + межа

IE5.0/5.5:
clientWidth = ширина - межа

clientHeight = висота - межа

offsetWidth = ширина

зсувВисота = висота

(Варто зазначити: атрибут margin у CSS не має нічого спільного з clientWidth, offsetWidth, clientHeight, offsetHeight)

Область видимості веб-сторінки: document.body.clientWidth
Висота зони видимості веб-сторінки: document.body.clientHeight
Ширина видимої площі веб-сторінки: document.body.offsetWidth (включно з шириною ребра)
Висота видимої області вебу: document.body.offsetHeight (включно з висотою країв)
Повна ширина тексту веб-сторінки: document.body.scrollWidth
Повна висота тексту: document.body.scrollВисота
Сторінка прокручена вгору: document.body.scrollTop
Сторінка прокручена вліво: document.body.scrollЛіворуч
У тілі веб-сторінки: window.screenTop
Ліворуч від тіла веб-сторінки: window.screenLeft
Висока роздільна здатність екрана: window.screen.height
Ширина роздільної здатності екрана: window.screen.width
Висота доступного робочого простору: window.screen.availHeight
Ширина доступного робочого простору екрану: window.screen.availWidth

div.style.top: Верхня відстань відносно компонента, де розташований div

-------------------

Технічні особливості
Код у цьому розділі переважно використовує деякі властивості об'єкта Document щодо вікна, і основні функції та використання цих властивостей такі.

Щоб отримати розмір вікна, для різних браузерів потрібно використовувати різні властивості та методи: щоб визначити справжній розмір вікна, потрібно використовувати властивість Window у Netscape; У IE потрібно заглибитися в документ, щоб виявити тіло. У DOM-середовищі, щоб визначити розмір вікна, потрібно звертати увагу на розмір кореневого елемента, а не на елемент.

Властивість innerWidth об'єкта Window містить внутрішню ширину поточного вікна. Властивість innerHeight об'єкта Window містить внутрішню висоту поточного вікна.

Атрибут тіла об'єкта Document відповідає тегу HTML-документа. Властивість documentElement об'єкта Document представляє кореневий вузол HTML-документа.

document.body.clientHeight вказує на поточну висоту вікна, в якому розташований HTML-документ. document.body. clientWidth представляє поточну ширину вікна, в якому розташований HTML-документ.

Події розміру браузера

window.onresize=funName; Викликайте функцію funName, коли змінюється розмір браузера




Попередній:Назва SEO Ключове слово Обмеження Назва, ключові слова, опис{filter}tion Довжина
Наступний:Тип «Object» визначається в непосиланій асемблі. Потрібно додати відповідь до програми...
Застереження:
Усе програмне забезпечення, програмні матеріали або статті, опубліковані Code Farmer Network, призначені лише для навчання та досліджень; Вищезазначений контент не повинен використовуватися в комерційних чи незаконних цілях, інакше користувачі несуть усі наслідки. Інформація на цьому сайті надходить з Інтернету, і спори щодо авторських прав не мають до цього сайту. Ви повинні повністю видалити вищезазначений контент зі свого комп'ютера протягом 24 годин після завантаження. Якщо вам подобається програма, будь ласка, підтримуйте справжнє програмне забезпечення, купуйте реєстрацію та отримайте кращі справжні послуги. Якщо є будь-яке порушення, будь ласка, зв'яжіться з нами електронною поштою.

Mail To:help@itsvse.com