• Статья
Управление представлением с помощью свойств измерения и расположения в режиме совместимости

Динамический HTML (язык DHTML) предоставляет свойства измерения и расположения, которые можно использовать для изменения размера и положения элементов HTML на веб-страницах. Знания о том, что представляют собой эти свойства и как они влияют на элементы на странице, помогут вам повысить степень контроля над внешним видом веб-страниц. Например, эти свойства можно использовать для разработки страниц, которые похожи на документы в других приложениях, таких как Microsoft PowerPoint или Microsoft Word. Данная статья включает в себя следующие разделы, в которых поясняется, как использовать свойства измерения и расположения для управления внешним видом веб-страницы.

Примечание.  В данном документе описывается разметка и свойства расположения для страницы, отображаемой в режиме совместимости браузера Windows Internet Explorer. Для правильно работы приведенных на данной странице примеров определять !DOCTYPE не требуется. Для получения сведений о разметке и расположении в строгом режиме см. статью Управление представлением с помощью свойств измерения и расположения в строгом режиме (страница может быть на английском языке).

  • Требования 
  • Общие сведения о разметке 
    • Прямоугольник элемента 
    • Сравнение блочных и встроенных элементов 
    • Размер, разметка и расположение элементов 
  • Общие сведения об измерениях 
    • Абсолютные и относительные единицы длины 
    • Пример измерения 
  • Общие сведения о расположении 
    • Верхнее и левое расположения 
    • Элементы offsetParent 
    • Особые случаи 
    • Вложенные элементы 
    • Пример расположения 
  • Позиционированные элементы 
  • Использование свойств измерения и расположения 
  • Расширенные методики 
  • См. также

Требования

В данном документе предполагается, что вы знакомы со скриптовым языком на стороне клиента, таким как Microsoft JScript или Microsoft Visual Basic Scripting Edition (VBScript). Кроме того, вы должны быть знакомы с объектной моделью (DOM) документов DHTML и каскадными таблицами стилей (CSS).

Общие сведения о разметке

Свойства измерения и расположения доступны через объектную модель (DOM) документов DHTML и в виде атрибутов CSS. Свойства модели DOM DHTML можно использовать для программного здания атрибутов CSS. Свойства, предоставляемые через модель DOM DHTML, возвращают значения, основанные на способе отображения элемента в документе. Атрибуты CSS возвращают значения, основанные на предварительно заданных значениях других атрибутов CSS.

Все свойства CSS предоставляются с помощью объектов style и runtimeStyle. Объект currentStyle можно использовать для выполнения запроса текущего значения свойства.

Прямоугольник элемента

Каждый видимый элемент на веб-странице занимает абсолютное место в документе. Занимаемое элементом место определяется прямоугольником или рамкой элемента. Прямоугольник элемента включает в себя всю разметку и отображаемые свойства, а также контент.

На предыдущем рисунке свойства margin, border и padding окружают контент общего элемента. Значение "Element Width" (Ширина элемента) представляет ширину контента элемента, а значение "Box Width" (Ширина рамки) представляет ширину контента и дополнительное место, занятое свойствами разметки. Высота элемента и его свойства разметки могут быть представлены схожим образом.

Сравнение блочных и встроенных элементов

Все видимые элементы HTML отображаются в блочном или во встроенном виде. Блочный элемент, такой как div, обычно начинается с новой строки и имеет размер, соответствующий ширине родительского контейнера. Встроенный элемент, такой как span, обычно не начинается с новой строки и имеет размер, соответствующий высоте и ширине его контента.

Размер, разметка и расположение элементов

Элемент имеет разметку, когда выполняется одно из следующих условий:

  • Для него указана ширина и/или высота.
  • Он является встроенным-блочным (display: inline-block).
  • Он имеет абсолютное позиционирование (position: absolute).
  • Он является плавающим (float: left, float: right).
  • Он является элементом таблицы.
  • Он преобразован (style="zoom: 1").

Почти все встроенные и блочные элементы имеют разметку. Исключением является встроенный элемент, который не позиционирован и не имеет заданной высоты или ширины.

Позиционированный элемент имеет определенные измерения и может быть установлен в расположении с помощью атрибутов разметки CSS: top, right, left, bottom. Расположение непозиционированных элементов является относительным по отношению к их ближайшему предку с разметкой (offsetParent). Расположение удобно использовать при перемещении одного или нескольких элементов в относительные или абсолютные координаты в пределах документа. Его также может быть удобно использовать для создания определенных стилей документов.

Общие сведения об измерениях

Высота и ширина — это наиболее часто используемые измерения. Используйте свойства offsetHeight и offsetWidth для извлечения этих измерений из любого отображенного встроенного или блочного элемента. Чтобы задать эти измерения, используйте атрибуты height и width (или соответствующие свойства). Чтобы атрибут измерения CSS можно было использовать, необходимо перед извлечением данных задать значение этого атрибута.

Встроенные элементы получают разметку при задании их высоты или ширины. Встроенные элементы с разметкой предоставляют те же самые свойства разметки, такие как border, margin и padding, что и блочные элементы. В следующем примере показано, как атрибуты разметки влияют на внешний вид веб-страницы, когда для элемента задан атрибут height.

<!-- Стили отображаются, поскольку эта ссылка имеет разметку. -->

<a href="https://msdn.microsoft.com/"

   style="width:150px; border:1px solid; padding:10px; margin:5px;">

   MSDN Online</a>

<!-- Стили не отображаются, поскольку у этой ссылки нет разметки. -->

<a href="https://msdn.microsoft.com/"

   style="border:1 solid; padding:10px; margin:5px;">

   MSDN Online</a>

Абсолютные и относительные единицы длины

При задании или извлечении значений измерения и расположения элемента можно использовать другие единицы длины для получения определенного стиля. Использование единиц длины значительно упрощает значения измерения и расположения. Для смешения единиц длины требуется программно определить значение абсолютной единицы длины на основании относительной единицы для каждой из систем. Например, на каждом компьютере, где отображается ваш документ, может потребоваться преобразовать дюймы в пиксели.

Свойства разметки влияют на размеры элемента и должны учитываться при определении размеров контента. Размер контента элемента задается по заданным измерениям за вычетом размеров границы и отбивки. Поскольку свойства DHTML и CSS не предоставляют измерение контента без отбивки, для точного определения измерения необходимо отдельно запросить свойства padding. Хотя для определения размера контента можно использовать свойства offset и client, проще вычесть размер свойств border и padding из ширины элемента.

Обратите внимание на приведенный ниже элемент div:

<div id="oDiv"

   style="padding:10px; width:250px; height:250px;

      border:2px outset; background-color:#CFCFCF;">

</div>

Высота и ширина, заданные для приведенного выше элемента div, равны 250 пикселям. Ширину контента можно вычислить следующим образом:

oDiv.style.width - oDiv.style.borderWidth - oDiv.style.padding

Однако поскольку все три свойства возвращают типы данных variant, необходимо либо преобразовать значения в целые числа, либо использовать свойства, которые возвращают целые числа. Например, чтобы получить ширину элемента в пикселях, можно использовать один из следующих способов в JScript:

var iWidth = oDiv.style.pixelWidth

var iWidth = parseInt(oDiv.style.width) (ширина указана в пикселях)

var iWidth = oDiv.offsetWidth

Если значения свойств border или padding заданы в тех же единицах длины, что и свойство width, можно преобразовать значение типа variant в целое число. Чтобы определить размеры контента, используйте свойства border и padding или свойства client и padding и размеры элемента. При извлечении значений границы и отбивки используйте свойства borderWidth и padding, если эти значения одинаковы на всех сторонах элемента. В противном случае необходимо отдельно выполнить запрос свойств borderLeftWidth, borderRightWidth, paddingLeft и paddingRight для получения точного измерения.

Например, чтобы получить ширину контента в пикселях, можно использовать один из следующих способов в JScript, где объект iWidth основан на одной из методик из предыдущего примера.

  • Используйте эту формулу, если размеры границы и отбивки неодинаковы с разных сторон.

    var iCntWidth = (iWidth - parseInt(oDiv.style.borderLeftWidth)

        - parseInt(oDiv.style.borderRightWidth)

        - parseInt(oDiv.style.paddingLeft)

        - parseInt(oDiv.style.paddingRight)

        )

  • Используйте эту формулу, если размеры границы и отбивки одинаковы со всех сторон.

    var iCntWidth = (iWidth - parseInt(oDiv.style.borderWidth)

        - parseInt(oDiv.style.padding)

        )

  • Используйте эту формулу вместо использования свойств border.

    var iCntWidth = (iWidth - (oDiv.offsetWidth - oDiv.clientWidth)

        - parseInt(oDiv.style.padding)

        )

Примечание.  Эти формулы не работают, если значения отбивки или поля указаны в процентах.

Пример измерения

В следующем примере используется первая формула из предыдущего для перемещения и изменения размера позиционированного элемента на основе контента другого элемента.

<script>

window.onload=fnInit;

function fnInit(){

   var iWidth=oDiv.style.pixelWidth;

   var iHeight=oDiv.style.pixelHeight;

   var iCntWidth=(iWidth - parseInt(oDiv.style.borderLeftWidth)

      - parseInt(oDiv.style.borderRightWidth)

      - parseInt(oDiv.style.paddingLeft)

      - parseInt(oDiv.style.paddingRight));

   var iCntHeight=(iHeight - parseInt(oDiv.style.borderTopWidth)

      - parseInt(oDiv.style.borderBottomWidth)

      - parseInt(oDiv.style.paddingTop)

      - parseInt(oDiv.style.paddingBottom));

   var iTop=oDiv.offsetTop + parseInt(oDiv.style.borderTop)

      + parseInt(oDiv.style.paddingTop);

   var iLeft=oDiv.offsetLeft + parseInt(oDiv.style.borderLeft)

      + parseInt(oDiv.style.paddingLeft);  

   oDiv2.style.width=iCntWidth;

   oDiv2.style.height=iCntHeight;

   oDiv2.style.top=iTop;

   oDiv2.style.left=iLeft;

}

</script>

<div id="oDiv"

   style="padding:20px 5px 10px 10px; width:250px; height:250px;

      border:10px outset; background-color:#CFCFCF;">

</div>

<div id="oDiv2" style="position:absolute; border:2 inset;

   background-color:#000099;">

</div>

Общие сведения о расположении

Часть Internet Explorer, используемая для отображения документа, называется клиентской областью. Начинающееся с верхнего левого угла, для координат x и y которого задано значение 0, клиентская область не имеет унаследованного поля или унаследованной отбивки. Элемент BODY является первым контейнером в документе и родительским элементом самого верхнего уровня. Как и клиентская область, элемент BODY не имеет поля или отбивки по умолчанию и также начинается с координат x и y, равных 0.

Расстояние между элементом и его положением или предком offsetParent определяет расположение элемента. Internet Explorer предоставляет расположение элемента во время отображения документа или во время вынужденной перерисовки документа из-за изменения контента. Знания о том, как элементы располагаются внутри документа, являются ключом к определению и изменению расположения элемента.

Общая разметка элементов по большей части основана на потоке документа. Поток документа является аналогом атрибута writingMode. В западных языках поток указывает на разметку контента слева направо и сверху вниз. Встроенные и блочные элементы без абсолютного позиционирования используют такой поток по умолчанию, если не указано иное. Элементы с абсолютным позиционированием отображаются за пределами потока документа. Поток документа — это порядок элементов после вычисления их измерений. Изменение измерений или расположения позиционированных элементов не затрагивает соседние элементы в потоке документа, но может повлиять на дочерние элементы.

Непозиционированные встроенные и блочные элементы отображаются вместе и являются частью потока документа. Расположение элемента может измениться, когда изменяется измерение другого элемента, расположенного перед ним в потоке документа. Измерение элемента изменяется, когда контент, разметка или стиль шрифта другого элемента обновляются после отображения документа. При изменении измерения непозиционированного элемента изменяется расположение элементов, расположенных рядом с ним в потоке документа. .

Верхнее и левое расположения

В следующем примере показано, как извлечь расположение встроенного элемента и как измерения другого элемента влияет на расположение данного элемента.

<script>

function getLocation(){

   alert("Left: " + oSpan.offsetLeft);

   oSpan1.innerHTML="Changed content.";

   alert("Left: " + oSpan.offsetLeft);

   oSpan1.innerHTML="Это некоторый динамический контент.";

}

</script>

</body>

<span id="oSpan1">Это некоторый динамический контент.</span>

<span style="background-color:#CFCFCF;" id="oSpan">

Этот контент не изменяется, но расположение этого элемента изменится.

</span>

<input type="button" VALUE="Расположить второй элемент" onclick="getLocation()">

</body>

Элементы offsetParent

Хотя можно извлечь верхнее и левое расположение любого отображаемого элемента, значения этих расположений указываются относительно позиционированного элемента или элемента offsetParent. Иногда при определении расстояния между двумя элементами нельзя полагаться на одно значение.

На следующем изображении изображены значения offsetLeft элемента span и элемента table. Значение смещения для обоих элементов составляет 50 пикселей. Однако если запросить значение смещения ячейки таблицы, свойство offsetLeft возвращает только 3 пикселя, поскольку table является элементом offsetParent для элемента td (ячейка 1). Чтобы определить расстояние от ячейки таблицы до края экрана, сложите эти два значения.

Особые случаи

Некоторые элементы, такие как table, предоставляют свою собственную объектную модель и определенный набор свойств, таких как cellPadding и cellSpacing. Из объекта currentStyle можно извлечь текущее значение свойства cellPadding с помощью свойства padding. Необходимо извлечь свойство cellSpacing непосредственно из элемента table.

Вложенные элементы

Для определения расстояния между вложенным элементом и его offsetParent, таким как элемент BODY, может потребоваться включить расположение offsetParent. Например, верхнее и левое расположения элемента td возвращают расстояние между ячейкой и offsetParent, которым является элемент table. Чтобы определить расстояние между вложенным элементом и элементом BODY, необходимо подняться по иерархии документа и добавить значения левых расположений для всех элементов offsetParent между двумя этими элементами.

Пример расположения

В следующем примере показано, как программно извлечь абсолютное расстояние между элементом td и элементом BODY.

<script>

function getAbsoluteLeft(oNode){

   var oCurrentNode=oNode;

   var iLeft=0;

   while(oCurrentNode.tagName!="BODY"){

      iLeft+=oCurrentNode.offsetLeft;

      oCurrentNode=oCurrentNode.offsetParent;

   }

   alert("Left: " + oNode.offsetLeft + "\nAbsolute Left: " + iLeft);

}

</script>

<body>

<input

   type="button"

   value="Получение абсолютного левого значения"

   onclick="getAbsoluteLeft(oCell)"/>

<table cellspacing="2">

<tr><td id="oCell">Ячейка 1</td></tr>

</table>

</body>

Позиционированные элементы

Измерения элемента с абсолютным позиционированием сначала определяются любыми указанными свойствами измерения, такими как высота или ширина, указанными после его контента. Это справедливо для блочных и встроенных элементов. Однако относительно позиционированный элемент сохраняет свои блочные или встроенные измерения, пока не будет указано иное.

В следующем примере показано, что измерения блочного элемента и встроенного элемента совпадают, когда для атрибута position задано значение absolute.

<div style="background-color:#CFCFCF; position:relative; top:10px;">

   Текст

</div>

<span style="background-color:#CFCFCF; position:absolute; top:30px;">

   Текст

</span>

Эту же процедуру можно использовать для задания или извлечения измерений позиционированных элементов и непозиционированных элементов.

Использование свойств измерения и расположения

Значения измерения и расположения необязательно должны быть статическим целыми числами. Они могут быть скриптовыми значениями, основанными на расстояниях и размерах других элементов, выраженных длинах (как в более традиционных единицах) или формулах. При работе с несколькими элементами можно использовать измерение одного элемента, чтобы задать расположение другого.

Описанные здесь свойства измерения и расположения можно использовать для создания более сложных объектов. Например, чтобы разместить элемент по центру контейнера, задайте его левую координату равной разности половины ширины контейнера и половины ширины элемента. Соответствующий синтаксис приведен в следующем примере.

<script>

function center(oNode){

   var oParent=oNode.parentElement;

   oNode.style.left=oParent.offsetWidth/2 - oNode.offsetWidth/2;

}

</script>

<div

   id="oDiv"

   onclick="center(this)"

   style="position:absolute;">

   Щелкните здесь для размещения по центру

</div>

Выражения являются значениями, полученными по формулам. Можно использовать выражения для постоянного обновления значений свойств. В предыдущем примере элемент размещается по центру один раз и может смещаться при изменении размера окра браузера. Чтобы сохранить определенную разметку, используйте вместо статического значения формулу.

Используйте метод setExpression для добавления выражений в атрибуты CSS и свойства DHTML. В следующем примере показано, как разместить элемент по центру с помощью выражения, а не статического значения.

<script>

function center(oNode){

   oNode.style.setExpression("left","getCenter(this)");

}

function getCenter(oNode){

   var oParent=oNode.parentElement;

   return (oParent.offsetWidth/2 - oNode.offsetWidth/2);

}

</script>

<div

   id="oDiv"

   onclick="center(this)"

   style="position:absolute;">

   Щелкните здесь для размещения по центру

</div>

Хотя модель DOM DHTML предоставляет простой способ для получения текущих размеров и расположения элемента, в большинстве случаев для задания этих значений следует использовать CSS. За исключением элементов, предоставляющих свойства height и width, таких как img и table, можно использовать различные атрибуты CSS для задания размера элемента. Хотя многие свойства возвращают значения в пикселях, можно использовать некоторые свойства CSS с определенными единицами длины, такими как дюймы или сантиметры.

Например, если верхнее и левое расположения элемента H1 равны 2 дюймам, свойства offsetTop и offsetLeft возвращают приблизительно 190 пикселей в зависимости от разрешения экрана. Поскольку свойства top и left возвращают строковое значение 1in, можно использовать свойства posTop и posLeft для увеличения или уменьшения расположения в дюймах, а не в пикселях. Свойства posTop и posLeft используют те же единицы длины, что и аналогичные им свойства CSS top и left.

В следующем примере элемент H1 перемещается на 1 дюйм при каждом его щелчке.

<script>

function moveMe(){

   // Перемещение объекта на один дюйм.

   oHeader.style.posLeft+=1;

   oHeader.style.posTop+=1;

}

</script>

<h1 id="oHeader"

   style="position:absolute; top:1in; left:1in;"

   onclick="moveMe()">

   Заголовок

</h1>

При перемещении элементов в заданные расположения в документе иногда требуется учитывать различные свойства элемента рамки. Значения высоты и ширины включают в себя измерения границы и отбивки. При перемещении одного элемента в видимый угол другого элемента относительно просто выполняется с использованием свойств offset и методов, описанных в предыдущем примере. Однако при позиционировании элемента в определенной точке в углу другого позиционированного элемента следует учитывать размер отбивки и границы. Для установки расположения в пределах контента элемента можно использовать либо свойства client, либо свойства padding и border. Кроме того, для установки расположения можно использовать TextRectangle.

В следующем примере показаны три различных способа позиционирования элемента в пределах контента другого элемента. Сначала свойства pixel, border и padding CSS используются для перемещения элемента в контент внутри позиционированного элемента. Потом свойства offset и client DHTML используются для перемещения элемента в контенте позиционированного элемента без учета отбивки. И, наконец, TextRectangle используется для установки расположения элемента.

<script>

function fnMove1(){

   // Метод 1: использование только свойств CSS.

   var iTop1=oDiv.style.pixelTop +

      parseInt(oDiv.style.borderTopWidth) +

      parseInt(oDiv.style.paddingTop);

   var iLeft1=oDiv.style.pixelLeft +

      parseInt(oDiv.style.borderLeftWidth) +

      parseInt(oDiv.style.paddingLeft);

   oMarker.style.top=iTop1;

   oMarker.style.left=iLeft1;

}

function fnMove2(){

   // Метод 2: использование только свойств DHTML.

   var iTop2=oDiv.offsetTop + oDiv.clientTop;

   var iLeft2=oDiv.offsetLeft + oDiv.clientLeft;

   oMarker.style.top=iTop2;

   oMarker.style.left=iLeft2;

}

function fnMove3(){

   // Метод 3: использование DHTML, CSS и TextRectangle.

   var aRects=oDiv.getClientRects();

   var oRect=aRects[0];

   var oBnd=oDiv.getBoundingClientRect();

   oMarker.style.top=oBnd.top +

      parseInt(oDiv.style.paddingTop) +

      parseInt(oDiv.style.borderTop);

   oMarker.style.left=oBnd.left +

      parseInt(oDiv.style.paddingLeft) +

      parseInt(oDiv.style.borderLeft);;  

}

</script>

<div id="oDiv"

   style="position:absolute; top:150px; left:50px; border:10px outset;

      padding:10px; width:250px; height:250px; background-color:#EFEFEF;">

Переместите метку сюда.

</div>

<span id="oMarker"

   style="top:200px; left:200px; position:absolute;

      border: 2px outset; background-color:#CFCFCF;">

Метка

</span>

<input type="button" value="CSS" onclick="fnMove1()">

<input type="button" value="DHTML" onclick="fnMove2()">

<input type="button" value="TextRectangle" onclick="fnMove3()">

Расширенные методики

Выражения DHTML и объекты runtimeStyle и currentStyle можно использовать для создания более сложных формул измерения и расположения. выражения используют формулы для возврата возможного значения для любого свойства чтения/записи DHTML или CSS. Чтобы запросить текущее значение свойства, используйте вместо объекта style объект currentStyle. Чтобы временно задать значение свойства, используйте вместо объекта style объект runtimeStyle. При очистке значения свойства из объекта runtimeStyle оно возвращается к исходному значению свойства, заданному для объекта style.

Выражения, DHTML и CSS предоставляют собой надежную модель для представления информации вашей аудитории. В следующем примере эти технологии используются для реализации анимации списка при загрузке документа. Атрибут marginLeft включает в себя выражение, которое возвращает значение, основанное на переменной.

После загрузки документа вызывается метод setInterval для увеличения переменной до достижения ей целевого значения. Это значение определяется свойством marginLeft сестринского элемента определенного элемента списка, доступного в свойстве previousSibling. При увеличении переменной вызывается метод recalc с параметром true, поскольку атрибут marginLeft не является неявно зависимым от переменной. Добавление значения marginLeft сестринского элемента списка приводит к расположению всего списка в виде каскада.

<style>

li {margin: expression(fnTabIt(this));}

</style>

<script>

window.onload=fnInit;

// Начальное приращение  marginLeft.

var iDML=0;

// Целевое приращение marginLeft.

var iDMLTarg=30;

// Коэффициент приращения.

var iDMLMod=.25;

// Скорость анимации в миллисекундах.

var iDMLSpeed=50;

var oInterval;

function fnTabIt(oNode){

   var oPSib=oNode.previousSibling;

   if(oPSib!=null){

      var iML=0;

      if(oPSib.style.marginLeft!=""){

         iML=parseInt(oPSib.style.marginLeft);

      }

      return ((iDML*iDMLMod) + iML);

   }

   else{

      return 0;

   }

}

function fnAdjustTab(){

   if(iDML<iDMLTarg){

      iDML++;

      document.recalc(true);

   }

   else{

      iDML=iDMLTarg;

      window.clearInterval(oInterval);

   }

}

function fnInit(){

   oInterval=window.setInterval("fnAdjustTab()",iDMLSpeed);     

}

</script>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

<li>Item 5</li>

<li>Item 6</li>

<li>Item 7</li>

<li>Item 8</li>

<li>Item 9</li>

<li>Item 10</li>

</ul>

Нажмите кнопку "Показать" для просмотра интерактивной демонстрации, посвященной свойствам измерения и расположения. При выборе пары свойств размеры и расстояния отображаются с использованием индикаторов, созданных в соответствии с описанием в обзоре.

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/css/overview/InteractiveMeasurement.htm

См. также