HTML -точные атрибуты позиционирования: Scrollleft, Scrollwidth, Client Whidth, OffsetWidth
Scrollheight: Получает высоту прокрутки объекта.
Scrollleft: установите или получите расстояние между левой границей объекта и самым левым концом видимого в настоящее время в окне
Scrolltop: установите или получите расстояние между верхней частью объекта и верхней частью видимого содержания в окне
Прокрутка: Получите ширину прокрутки объекта
OffSetheight: Получает высоту объекта по сравнению с макетом или родительской координатой, указанной родительской координатой.
OffSetSetleft: Получает рассчитанное левое положение объекта относительно макета или родительских координат, указанных в свойстве OffSetSet.
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
Ширина видимой области веб -страницы: 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
Технические основные моменты
Код в этом разделе в основном использует некоторые свойства объекта документа о окне. Основные функции и использование этих свойств следующие.
Чтобы получить размер окна, для разных браузеров необходимо использовать различные свойства и методы: чтобы обнаружить истинный размер окна, вам необходимо использовать атрибуты окна под Netscape; обнаружить тело в т.е.; Чтобы получить размер окна, вам нужно обратить внимание на размер корневого элемента, а не на элемент.
Свойство внутренней пропуска у окна содержит внутреннюю ширину текущего окна. Свойство Innerheight у окна содержит внутреннюю высоту текущего окна.
Атрибут тела объекта документа соответствует тегу HTML -документа. Свойство документов объекта документа представляет корневой узел HTML документа.
document.body.clientHeight представляет текущую высоту окна, где находится документ HTML. document.body.clientWidth представляет текущую ширину окна, где находится документ HTML.
Пример кода
Кода -копия выглядит следующим образом:
<! Доктип>
<html>
<голова>
<название>
Пожалуйста, отрегулируйте окно браузера
</title>
<meta charset = "utf8">
</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 = findDimensions;
//->
</script>
</body>
</html>
Интерпретация исходной программы
(1) Программа сначала создает форму, содержащую два текстовых поле для отображения текущей ширины и высоты окна, и ее значение изменится с изменением размера окна.
(2) В последующем коде JavaScript две переменные Dinwidth и Winheight сначала определены, чтобы сохранить значения высоты и ширины окна.
(3) Затем, в функции FindDimensions (), используйте window.innerheight и window.innerwidth, чтобы получить высоту и ширину окна, и сохраните обе в двух вышеупомянутых переменных.
(4) Затем, углубляясь в документ, обнаружая тело, получая размер окна и сохраняя его в двух вышеупомянутых переменных.
(5) В конце функции результат выводит на два текстовых поле, получив элемент формы по имени.
(6) В конце кода JavaScript заполните всю операцию, вызывая функцию findDimensions ().