§ 23. Элементы JavaScript для создания веб-страниц: 23.3. Использование элементов управления на веб-страницах

§ 23. Элементы JavaScript для создания веб-страниц

23.3. Использование элементов управления на веб-страницах

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

Переключение между скрытием и отображением можно установить для любого блочного элемента (<div>, <h1>-<h6>, <p>, <form> и др). Достигается изменение видимости элемента за счет изменения css-свойства display. Если display = "block", то элемент будет видимым, если display = 'none' — скрыт.

Рассмотрите пример 23.11.

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

При обработке таких событий, как перемещение указателя мыши, могут понадобиться детали того, что произошло (например, координаты указателя). В этом случае, когда происходит событие, браузер создаёт объект события (event), записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример 23.12 демонстрирует получение координат мыши из объекта события.

Пример 23.11. Изменение видимости блока по клику на кнопку.

1) Html-код:

Нажмите

</button>

Это мой элемент DIV

</div>

2) Скрипт:

function myFunction() {

var x =

document.getElementById ("my");

if (x.style.display === "none") {

/* сравнение без преобразования типов */

x.style.display = "block"; }

else {

x.style.display = "none"; }

}

3) Результат:

Пример 23.12. Определение перемещения курсора.

1) Стилевое описание:

html, body {

margin: 0;

/*Убираем оступы на странице*/

}

#crd {

background: #333;

color: #fff;

padding: 8px;

}

2) Скрипт (в заголовке html-документа):

function m_Crd(e) {

x = e.pageX;

y = e.pageY;

document.getElementById("crd")

.innerHTML =

"X : " + x + ", Y : " + y;

}

3) Html-код:

<body onmousemove =

"m_Crd(event)">

</body>