Ширина видимой области веб -страницы: 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.creentop
Слева от основного текста веб -страницы: window.screenleft
Высокое разрешение экрана: window.screen.height
Ширина разрешения экрана: window.screen.width
Доступная экрана высота рабочего пространства: window.screen.availeheight
Экран доступная ширина рабочей области: window.screen.availWidth
HTML точное позиционирование: Scrollleft, Scrollwidth, клиент -ширина, OffsetWidth
Scrollheight: Получает высоту прокрутки объекта.
Scrollleft: установите или получите расстояние между левой границей объекта и самым левым концом видимого в настоящее время в окне
Scrolltop: установите или получите расстояние между верхней частью объекта и верхней частью видимого содержания в окне
Прокрутка: Получите ширину прокрутки объекта
OffSetheight: Получает высоту объекта по сравнению с макетом или родительской координатой, указанной родительской координатой.
OffSetSetleft: Получает рассчитанное левое положение объекта относительно макета или родительской координаты, указанной в свойстве смещения.
OffSetTotop: Получает рассчитанную верхнюю позицию объекта относительно макета или родительской координаты, указанной в свойстве OffSetTop
event.clientx Горизонтальные координаты по сравнению с документом
Event.clienty вертикальные координаты относительно документа
event.offsetx Горизонтальные координаты по сравнению с контейнером
Event.Offsety Вертикальные координаты относительно контейнера
document.documentelement.scrolltop значения прокрутки вертикально
event.clientx + document.documentelement.scrolltop относительно горизонтальной координаты документа + количество прокрутки в вертикальном направлении
Т.е. различия Firefox следующие:
IE6.0, FF1.06+:
ClientWidth = ширина + прокладка
ClientHeight = высота + прокладка
OffsetWidth = ширина + накладка + граница
OffSetheight = высота + накладка + граница
IE5.0/5.5:
ClientWidth = ширина - граница
ClientHeight = высота - граница
OffsetWidth = ширина
OffSetheight = высота
(Следует упомянуть, что атрибут маржи в CSS не имеет ничего общего с клиентской -точкой, OffsetWidth, ClientHeight и OffSetheight)
－－－－－－－－－－－－－－－－－－－－－－－－－－
Технические основные моменты
Код в этом разделе в основном использует некоторые свойства объекта документа о окне.
Чтобы получить размер окна, для разных браузеров необходимо использовать различные свойства и методы: чтобы обнаружить истинный размер окна, вам необходимо использовать атрибуты окна под Netscape; Тело;
Свойство внутренней пропуска у окна содержит внутреннюю ширину текущего окна. Свойство Innerheight у окна содержит внутреннюю высоту текущего окна.
Атрибут тела объекта документа соответствует тегу HTML -документа. Свойство документов объекта документа представляет корневой узел HTML документа.
document.body.clientHeight представляет текущую высоту окна, где находится документ HTML. document.body.clientWidth представляет текущую ширину окна, где находится документ HTML.
Код реализации <! -
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 Переход // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<TILE> Пожалуйста, отрегулируйте окно браузера </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
</head>
<тело>
<h2 align = "center"> Пожалуйста, отрегулируйте размер окна браузера </h2> <hr>
<form action = "#" method = "get" name = "form1" id = "form1">
<! Покажите фактический размер окна браузера>
Фактическая высота окна браузера: <input type = "text" name = "viesheight" size = "4"> <br>
Фактическая ширина окна браузера: <input type = "text" name = "appenwidth" size = "4"> <br>
</form>
<script type = "text/javascript">
<!
var winwidth = 0;
var winheight = 0;
function findDimensions () // Функция: получить размеры
{
// Получить ширину окна
if (window.innerwidth)
winwidth = window.innerwidth;
else if ((document.body) && (document.body.clientwidth)))
WinWidth = Document.Body.ClientWidth;
// Получить высоту окна
if (window.innerheight)
winheight = window.innerheight;
else if ((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.availeheight.value = winheight;
document.form1.availwidth.value = winwidth;
}
findDimensions ();
// вызов функции, чтобы получить значение
window.onresize = findiMensions;
////
</script>
</body>
</html>
Интерпретация исходной программы
(1) Программа сначала создает форму, содержащую два текстовых поле для отображения текущей ширины и высоты окна, и ее значение изменится с изменением размера окна.
(2) В последующем коде JavaScript две переменные Dinwidth и Winheight сначала определены, чтобы сохранить значения высоты и ширины окна.
(3) Затем, в функции FindDimensions (), используйте window.innerheight и window.innerwidth, чтобы получить высоту и ширину окна, и сохраните обе в двух вышеупомянутых переменных.
(4) Затем, углубляясь в документ, обнаружая тело, получая размер окна и сохраняя его в двух вышеупомянутых переменных.
(5) В конце функции результат выводит на два текстовых поле, получив элемент формы по имени.
(6) В конце кода JavaScript заполните всю операцию, вызывая функцию findDimensions ().