русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Позиционирование элементов на Web-странице в JavaScript

Режим позиционирования элемента Web-страницы, т.е. размещения его на экране, задается с помощью свойства CSS position, которое имеет следующие значения:

  • static - положение элемента на экране задается браузером в соответствии с тем местом, которое элемент занимает в HTML-документе (значение задано по умолчанию, не использует координаты элемента и поэтому не может быть выбрано для организации движения элемента);
  • relative - положение элемента на экране задается с помощью координат относительно того места на экране, куда браузер поместил бы элемент в режиме static;
  • absolute - положение элемента на экране задается с помощью его координат относительно родителя.

При использовании режима позиционирования absolute, положение элемента на экране может быть задано с помощью таких свойств CSS:

  • left - задает или возвращает горизонтальную позицию левой границы элемента относительно родителя (если родителем является тэг <BODY>, то относительно левой границы окна браузера);
  • top - задает или возвращает вертикальную позицию верхней границы элемента относительно родителя (если родителем является тэг <BODY>, то относительно верхней границы окна браузера);
  • right - задает или возвращает горизонтальную позицию правой границы элемента относительно родителя (если родителем является тэг <BODY>, то относительно правой границы окна браузера);
  • bottom - задает или возвращает вертикальную позицию нижней границы элемента относительно родителя (если родителем является тэг <BODY>, то относительно нижней границы окна браузера).

Если для одного элемента заданы оба свойства: left и right, то свойство right игнорируется. При совместном задании свойств top и bottom предпочтение отдается свойству top.

Значения свойств left, top, right и bottom могут быть заданы:

  • в абсолютных единицах:
    •  pt - в пунктах (1/72 дюйма);
    •  px - в пикселях;
    •  mm - в мм;
    •  cm - в см;
    •  in - в дюймах.
  • в процентах от ширины родителя;
  • предопределенным значением auto, которое задается по умолчанию и указывает на то, что элемент позиционируется браузером.

Если единицы измерения не указаны, то подразумевается, что они заданы в пикселях.
Ниже приведен пример рисунка, расположенного в 200 пикседях от левой границы экрана и в 100 пикселях от верхней границы экрана:

<IMG NAME="imgs" SRC="fish.gif" STYLE="position:absolute; left:200;top:100">

Если попытаться сдвинуть этот рисунок на экране на 50 пикселей вправо с помощью выражения

imgs.style.left+=50,

то это приведет к возникновению ошибки "Недопустимый аргумент" из-за того, что свойство left возвращает значение не в виде числа 200, а в виде строки "200px".

Поэтому надо или воспользоваться функцией parseInt(), которая возвращает только число:

imgs.style.left=parseInt(imgs.style.left)+50,

или вместо свойств left, top, right и bottom применять свойства:

  • pixelLeft - задает или возвращает численное значение горизонтальной позиции левой границы элемента в пикселях;
  • pixelTop - задает или возвращает численное значение вертикальной позиции верхней границы элемента в пикселях;
  • pixelRight - задает или возвращает численное значение горизонтальной позиции правой границы элемента в пикселях;
  • pixelBottom - задает или возвращает численное значение вертикальной позиции нижней границы элемента в пикселях.

В нашем примере вместо свойства left необходимо использовать свойство pixelLeft:

imgs.style.pixelLeft+=50;

Если же координаты элемента заданы в других единицах измерения, необходимо использовать свойства:

  • posLeft - задает или возвращает численное значение горизонтальной позиции левой границы элемента в единицах измерения, заданных свойством left;
  • posTop - задает или возвращает численное значение вертикальной позиции верхней границы элемента в единицах измерения, заданных свойством top;
  • posRight - задает или возвращает численное значение горизонтальной позиции правой границы элемента в единицах измерения, заданных свойством right;
  • posBottom - задает или возвращает численное значение вертикальной позиции нижней границы элемента в единицах измерения, заданных свойством bottom.

Просмотров: 18395

Вы можете --> Заказать скрипт

Вернуться воглавление


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.