русс | укр

Мови програмуванняВідео уроки php mysqlПаскальСіАсемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

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


Linux Unix Алгоритмічні мови Архітектура мікроконтролерів Введення в розробку розподілених інформаційних систем Дискретна математика Інформаційне обслуговування користувачів Інформація та моделювання в управлінні виробництвом Комп'ютерна графіка Лекції


Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...

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

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

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

При використанні режиму позиціонування absolute, положення елементи на екрані може бути задано за допомогою таких властивостей CSS:

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

Якщо для одного елемента задані обидва властивості: left, right, то властивість right ігнорується. При спільному завдання властивостей top і bottom перевагу віддається властивості top.

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

  • в абсолютних одиницях:
    •  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,

або замість властивостей, top left, right і bottom застосовувати властивості:

  • pixelLeft - задає або повертає чисельне значення горизонтальній позиції лівого кордону елемента в пікселях;
  • pixelTop - задає або повертає чисельне значення вертикальній позиції верхній кордону елемента в пікселях;
  • pixelRight - задає або повертає чисельне значення горизонтальній позиції правої межі елемента в пікселях;
  • pixelBottom - задає або повертає чисельне значення вертикальній позиції нижньої межі елемента в пікселях.

У нашому прикладі замість властивості left необхідно писпользовать властивість pixelLeft:

imgs.style.pixelLeft+=50;

Якщо ж координати елемента задані в інших одиницях виміру, необхідно писпользовать властивості:

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

Переглядів: 4755

Повернутися взміст


Онлайн система числення Калькулятор онлайн звичайний Науковий калькулятор онлайн