Предположим, что obj — это элемент управления HTML.
obj.offsetTop относится к вычисленному верхнему положению obj относительно макета или родительской координаты, указанной атрибутом offsetParent, целое число, единичный пиксель.
obj.offsetLeft относится к вычисленному левому положению obj относительно макета или родительской координаты, указанной атрибутом offsetParent, целое число, единичный пиксель.
obj.offsetWidth относится к абсолютной ширине самого элемента управления obj, исключая ту часть, которая не отображается из-за переполнения, то есть ширину, которую он фактически занимает, целое число, единичный пиксель.
obj.offsetHeight относится к абсолютной высоте самого элемента управления obj, исключая часть, не отображаемую из-за переполнения, то есть высоту, которую он фактически занимает, целое число, единичный пиксель.
Давайте объясним упомянутый ранее offsetParent.
offsetParent Получает ссылку на объект-контейнер, определяющую свойства offsetTop и offsetLeft объекта. offsetTop и offsetParent очень сложны, разные браузеры имеют разные интерпретации, и интерпретация снова разная, поэтому нам обычно нужно только понимать, что абсолютную позицию элемента управления в браузере можно получить с помощью этих двух.
Вышеупомянутые свойства также действительны в FireFox.
Кроме того: то, о чем мы здесь говорим, относится к значению атрибута элемента управления HTML, а не document.body. Значение document.body имеет разные интерпретации в разных браузерах (на самом деле, большинство сред вызваны разными интерпретациями document.body). body, а не из-за разных интерпретаций смещения)
Мы знаем, что offsetTop может получить позицию HTML-элемента из верхнего или внешнего элемента, а также можно использовать style.top. Разница между ними заключается в следующем:
1. offsetTop возвращает число, а style.top возвращает строку. Помимо числа, он также имеет единицу измерения: px.
2. offsetTop доступен только для чтения, а style.top доступен для чтения и записи.
3. Если для элемента HTML не указан верхний стиль, style.top возвращает пустую строку.
То же самое верно для offsetLeft и style.left, offsetWidth и style.width, offsetHeight и style.height.
высота клиента
Никто не возражает против clientHeight. Все думают, что это высота видимой области контента, что означает высоту области, где контент можно увидеть в браузере страниц. последняя панель инструментов и над строкой состояния. Это не имеет никакого отношения к содержимому страницы.
смещениеВысота
IE и Opera считают, что offsetHeight = clientHeight + полоса прокрутки + граница.
NS и FF считают offsetHeight фактической высотой содержимого веб-страницы, которая может быть меньше clientHeight.
прокруткаВысота
IE и Opera считают, что ScrollHeight — это фактическая высота содержимого веб-страницы, которая может быть меньше, чем clientHeight.
NS и FF считают, что ScrollHeight — это высота содержимого веб-страницы, но минимальное значение — clientHeight.
Проще говоря
clientHeight — высота области, в которой контент просматривается через браузер.
NS и FF полагают, что offsetHeight и ScrollHeight являются высотами веб-контента, но когда высота веб-контента меньше или равна clientHeight, значение ScrollHeight равно clientHeight, а offsetHeight может быть меньше clientHeight.
IE и Opera считают offsetHeight видимой областью полосы прокрутки clientHeight и границей. ScrollHeight — это фактическая высота содержимого веб-страницы.
Та же причина
Объяснения clientWidth, offsetWidth и ScrollWidth такие же, как и выше, просто замените высоту на ширину.
иллюстрировать
Вышеупомянутое основано на DTD HTML 4.01 Transitional. Если это DTD XHTML 1.0 Transitional, значение будет другим. В XHTML эти три значения имеют одно и то же значение, указывающее фактическую высоту содержимого. Большинство новых версий браузеров поддерживают включение различных интерпретаторов на основе DOCTYPE, указанного на странице.
ScrollTop — это значение «прокатанной» высоты, пример:
Скопируйте код кода следующим образом:
<div id="p">
<div id="t">Если для параметра ScrollTop установлено значение p, это содержимое может отображаться не полностью. </div>
</div>
<тип сценария="текст/javascript">
var p = document.getElementById("p");
п.scrollTop = 10;
</скрипт>
Поскольку для внешнего элемента p задано значение ScrollTop, внутренний элемент будет прокручиваться вверх, а свернутая часть — это ScrollTop.
ScrollLeft аналогичен.
Мы уже знаем, что offsetHeight — это ширина собственного элемента, а ScrollHeight — это абсолютная ширина внутреннего элемента, включая скрытую часть внутреннего элемента. В приведенном выше примере ScrollHeight p равен 300, а offsetHeight p равен 100.
ScrollWidth аналогичен.
IE и FireFox полностью поддерживают его, а Netscape 8 и Opera 7.6 не поддерживают ScrollTop и ScrollLeft (кроме document.body.scrollTop и document.body.scrollLeft).
1.clientHeight, clientWidth:
Эти два свойства примерно показывают высоту и ширину содержимого элемента в пикселях. Теоретически эти измерения не учитывают ничего, добавленного с помощью таблицы стилей.
Поля, границы и т. д. в элементах.
2.клиентлевый,клиенттоп:
Эти два возвращают толщину границы вокруг элемента. Если вы не указываете границу или не позиционируете элемент, ее значение равно 0.
3. прокрутка влево, прокрутка вверху:
Если элемент прокручивается, вы можете использовать эти два свойства, чтобы узнать, насколько далеко элемент прокрутился в горизонтальном и вертикальном направлениях. Единица измерения — пиксели.
Для элементов, которые не прокручиваются, эти значения всегда равны 0.
4. Высота прокрутки, Ширина прокрутки:
Независимо от того, сколько объектов видно на странице, они получаются целиком.
5.стиль.слева:
Смещение позиционированного элемента от левого края содержащего его прямоугольника.
6.style.pixelLeft:
Возвращает целочисленное значение смещения левой границы позиционированного элемента в пикселях, поскольку непиксельное значение атрибута возвращает строку, содержащую единицу измерения, например 30 пикселей. Используйте этот атрибут для обработки значений в пикселях отдельно.
7.стиль:posLetf:
Возвращает числовое значение смещения левой границы позиционированного элемента, независимо от единиц измерения, указанных в соответствующем элементе таблицы стилей, поскольку непозиционное значение атрибута возвращает строку, содержащую единицу измерения, например 1,2em.
Достаточно нескольких аналогий, таких как top, PixelTop, posTop.
ВЛЕВО: перемещается ли позиция слева направо, то есть расстояние между подвеской и левым краем экрана;
clientLeft возвращает расстояние между значением свойства offsetLeft объекта и реальным значением в левой части текущего окна.
offsetLeft возвращает левое значение объекта относительно макета или координат родительского объекта. Он принимает верхний левый угол родительского объекта в качестве начала координат, а координаты x — в положительном направлении осей X и Y. вправо и вниз.
PixelLeft устанавливает или возвращает положение объекта относительно левой части окна.
ScrollWidth — это ширина фактического содержимого объекта, исключая ширину края, и будет меняться в зависимости от количества содержимого в объекте (слишком большое количество содержимого может изменить фактическую ширину объекта).
clientWidth — это видимая ширина объекта, исключая полосы прокрутки и другие края, и она будет меняться в зависимости от размера экрана окна.
offsetWidth — это видимая ширина объекта, включая полосы прокрутки и другие края, которая будет меняться в зависимости от размера экрана окна.
IE6.0, FF1.06+:
clientWidth = ширина + отступ
clientHeight = высота + отступ
offsetWidth = ширина + отступ + граница
offsetHeight = высота + отступ + граница
IE5.0/5.5:
clientWidth = ширина – граница
clientHeight = граница высоты
offsetWidth = ширина
offsetHeight = высота
(Следует отметить: атрибут поля в CSS не имеет ничего общего с clientWidth, offsetWidth, clientHeight и offsetHeight)
offsetwidth: ширина смещения элемента относительно родительского элемента. Равно границе+отступам+ширине
clientwidth: видимая ширина элемента. Равно отступу+ширине
Scrollwidth: ширина элемента, включая часть прокрутки.
offsetLeft: позиция элемента Html относительно его собственного элемента offsetParent.
ScrollLeft: возвращает и устанавливает значение координат текущей задачи горизонтальной прокрутки.
Скопируйте код кода следующим образом:
<input type="button" value="Click" onclick="move()">
<div id="d" style="background-color:#ff9966; позиция: абсолютная; слева: 170 пикселей; сверху: 100 пикселей; ширина: 300; высота: 300; переполнение: прокрутка"
onclick="alert('offsetLeft:'+this.offsetLeft)">
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div>
</div>
<script Language="JavaScript">
функция перемещения()
{
var d=document.getElementById("d")
а=оценка(20)
d.scrollLeft+=a
}
</скрипт>
Сохраните как веб-страницу, запустите ее, нажмите кнопку, и полоса прокрутки переместится.
Нажмите на элемент div, сначала отобразите положение b относительно a, а затем отобразите положение a относительно окна.