Свойства определения высоты и ширины в Javascript
- Подробности
- Категория: PHP, MySQL, Java
- Опубликовано 20.10.2014 18:48
В этой статье мы св ами затронем тему определения размеров текущей страницы на Javascript. Как известно Javascript это очень популярный язык программирования для придания сайту интерактивности и для обеспечения более гибких возможностей его использования. Сейчас практически на каждом сайте применяется либо чистый Javascript, либо его фреймворк jQuery, которые достаточно популярен среди веб-разработчиков.
При создании приложений с использованием Javascript, очень часто возникает необходимость узнать размеры текущей страницы. Вот только свойств для её определения оень много и нужно аккуратно их перебирать и использовать со внимательностью. Некоторые свойства имеют разные данные в разных браузерах на разных платформах, из-за этого возникают сложности с определением единственного свойства, которое будет использоваться.
Итак, если вам потребовалось узнать ширину или высоту страницы на Javascript и вы не знаете как это сделать лучше, то вы попали по адресу. Мы постараемся вам помочь в этом.
Сперва мы вам предлагаем самим попробовать сделать выбор. Для этого вставьтете ниже приведённый код в ваш HTML документ в тэг <script> или в подключаемый файл:
document.body.innerHTML='';
document.body.innerHTML=document.body.innerHTML+'<br>document.documentElement.clientHeight-'+document.documentElement.clientHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.documentElement.offsetHeight-'+document.documentElement.offsetHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.documentElement.scrollHeight-'+document.documentElement.scrollHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.body.scrollHeight-'+document.body.scrollHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.body.offsetHeight-'+document.body.offsetHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.clientHeight-'+document.clientHeight;
document.body.innerHTML=document.body.innerHTML+'<br>document.body.clientHeight-'+document.body.clientHeight;
document.body.innerHTML=document.body.innerHTML+'<br>window.innerHeight-'+window.innerHeight;
document.body.innerHTML=document.body.innerHTML+'<br>window.screenY-'+window.screenY;
document.body.innerHTML=document.body.innerHTML+'<br>window.screen.availHeight-'+window.screen.availHeight;
document.body.innerHTML=document.body.innerHTML+'<br>window.screen.height-'+window.screen.height;
В данном коде мы использовали все наиболее популярные свойства для определения размеров страницы с помощью Javascript. Вы можете протестировать данный код на тех платформах и браузерах, на которых планируете выпускать приложение или сайт.
Как вы уже наверное заметили, в коде только высота, для того чтобы опередлить ширину в свойстве просто замените слово height на width.
Если вы собираетесь ориентировать ваше приложение на мобильные устройства, тогда мы вам порекомендуем использовать свойства windows.innerHeight и windows.innerWidth соответственно. Только эти свойства с достаточной степенью стабильности работают на мобильной платформе.