Ширина видимой области веб-страницы: document.body.clientWidth.
Высота видимой области веб-страницы: document.body.clientHeight.
Ширина видимой области веб-страницы: document.body.offsetWidth (включая ширину краев)
Высота видимой области веб-страницы: document.body.offsetHeight (включая ширину края)
Ширина полного текста тела веб-страницы: document.body.scrollWidth.
Полная высота текста веб-страницы: document.body.scrollHeight.
Высота прокручиваемой веб-страницы: document.body.scrollTop.
Левая часть прокручиваемой веб-страницы: document.body.scrollLeft.
В основной части веб-страницы: window.screenTop.
Левая часть основной части веб-страницы: window.screenLeft.
Высокое разрешение экрана: window.screen.height.
Ширина разрешения экрана: window.screen.width.
Доступная высота рабочей области экрана: window.screen.availHeight.
Доступная ширина рабочей области экрана: window.screen.availWidth
Точное позиционирование HTML: прокруткаLeft, прокруткаWidth, clientWidth, offsetWidth
ScrollHeight: Получает высоту прокрутки объекта.
ScrollLeft: устанавливает или получает расстояние между левым краем объекта и самым левым концом видимого в данный момент содержимого в окне.
ScrollTop: устанавливает или получает расстояние между верхом объекта и верхом видимого содержимого в окне.
ScrollWidth: получить ширину прокрутки объекта.
offsetHeight: Получает высоту объекта относительно макета или родительской координаты, указанной свойством offsetParent родительской координаты.
offsetLeft: Получает рассчитанное левое положение объекта относительно макета или родительской координаты, указанной свойством offsetParent.
offsetTop: получает рассчитанное верхнее положение объекта относительно макета или родительских координат, указанных свойством offsetTop.
Горизонтальная координата event.clientX относительно документа
event.clientY вертикальная координата относительно документа
Горизонтальная координата event.offsetX относительно контейнера
event.offsetY вертикальная координата относительно контейнера
document.documentElement.scrollTop — значение вертикальной прокрутки
event.clientX+document.documentElement.scrollTop Горизонтальная координата относительно документа + величина вертикальной прокрутки.
Различия между IE и FireFox заключаются в следующем:
IE6.0, FF1.06+:
clientWidth = ширина + отступ
clientHeight = высота + отступ
offsetWidth = ширина + отступ + граница
offsetHeight = высота + отступ + граница
IE5.0/5.5:
clientWidth = ширина – граница
clientHeight = граница высоты
offsetWidth = ширина
offsetHeight = высота
(Следует отметить: атрибут поля в CSS не имеет ничего общего с clientWidth, offsetWidth, clientHeight и offsetHeight)
Ширина видимой области веб-страницы: document.body.clientWidth.
Высота видимой области веб-страницы: document.body.clientHeight.
Ширина видимой области веб-страницы: document.body.offsetWidth (включая ширину краев)
Высота видимой области веб-страницы: document.body.offsetHeight (включая высоту края)
Полная ширина текста веб-страницы: document.body.scrollWidth.
Полная высота текста веб-страницы: document.body.scrollHeight.
Высота прокрутки веб-страницы: document.body.scrollTop.
Левая часть прокручиваемой веб-страницы: document.body.scrollLeft.
В основной части веб-страницы: window.screenTop.
Левая часть основной части веб-страницы: window.screenLeft.
Высота разрешения экрана: window.screen.height.
Ширина разрешения экрана: window.screen.width.
Доступная высота рабочей области экрана: window.screen.availHeight.
Доступная ширина рабочей области экрана: window.screen.availWidth
－－－－－－－－－－－－－－－－－－
Технические моменты
Код в этом разделе в основном использует некоторые свойства объекта Document, относящиеся к окну. Основные функции и использование этих свойств следующие.
Чтобы получить размер окна, необходимо использовать разные свойства и методы для разных браузеров: чтобы определить реальный размер окна, вам нужно использовать свойства окна в Netscape в IE, вам нужно углубиться в него; Документ для обнаружения тела; В среде DOM, если вы хотите получить размер окна, вам нужно обращать внимание на размер корневого элемента, а не самого элемента.
Свойство InnerWidth объекта Window содержит внутреннюю ширину текущего окна. Свойство InnerHeight объекта Window содержит внутреннюю высоту текущего окна.
Атрибут body объекта Document соответствует тегу HTML-документа. Свойство documentElement объекта Document представляет корневой узел HTML-документа.
document.body.clientHeight представляет текущую высоту окна, в котором расположен HTML-документ. document.body.clientWidth представляет текущую ширину окна, в котором расположен HTML-документ.
Реализация кода
Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title>Измените размер окна браузера</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</голова>
<тело>
<h2 align="center">Измените размер окна браузера</h2><hr>
<form action="#" метод="get" name="form1" id="form1">
<!--Показать реальный размер окна браузера-->
Фактическая высота окна браузера: <input type="text" name="availHeight" size="4"><br>
Фактическая ширина окна браузера: <input type="text" name="availWidth" size="4"><br>
</форма>
<тип сценария="текст/javascript">
<!--
вар WinWidth = 0;
вар winHeight = 0;
function findDimensions() //Функция: получение размеров
{
//Получаем ширину окна
если (окно.innerWidth)
winWidth = window.innerWidth;
иначе если ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//Получаем высоту окна
если (окно.innerHeight)
winHeight = window.innerHeight;
иначе если ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//Обнаруживаем тело, углубляясь в документ и получая размер окна
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//Вывод результатов в два текстовых поля
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
найтиРазмеры();
//Вызываем функцию и получаем значение
window.onresize=findDimensions;
//-->
</скрипт>
</тело>
</html>
Интерпретация исходной программы
(1) Программа сначала создает форму, содержащую два текстовых поля для отображения текущей ширины и высоты окна, и их значения будут меняться по мере изменения размера окна.
(2) В последующем коде JavaScript сначала определяются две переменные winWidth и winHeight для сохранения значений высоты и ширины окна.
(3) Затем в функции findDimensions() используйте window.innerHeight и window.innerWidth, чтобы получить высоту и ширину окна, и сохраните их в двух вышеупомянутых переменных.
(4) Затем определите тело, углубившись в документ, получите размер окна и сохраните его в двух упомянутых выше переменных.
(5) В конце функции при доступе к элементам формы по имени результаты выводятся в два текстовых поля.
(6) В конце кода JavaScript завершите всю операцию, вызвав функцию findDimensions().