JavaScript:Библиотеки/p5.dom/Класс p5.Element

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Черновик


Класс p5.Element [1]

Описание

Это базовый класс для всех элементов, добавляемых в скетч, включая холст, буферы графики и другие HTML-элементы. Методы, окрашенные в синий цвет, являются частью ядра p5.js, а методы, окрашенные в коричневый цвет – это методы библиотеки p5.dom. Обращение к этому классу не происходит напрямую, но объекты p5.Element создаются функциями createCanvas() и createGraphics(), а в библиотеке p5.dom они создаются функциями createDiv(), createImg(), createInput() и т.д.

Поля

  • elt – это HTML-элемент, обернутый объектом p5.Element. На нем можно вызывать все стандартные HTML-функции.

Методы

  • parent() – присоединяет элемент к заданному родительскому элементу. Это способ задать контейнер для элемента. В качестве параметра принимает строковый ID, DOM-узел и объект p5.Element. Если родительский элемент не задан, просто возвращает родительский узел. Более подробно о позиционировании холста читайте в этом руководстве.
  • id() – задает ID элемента. Если ID не указан, просто возвращает текущий ID элемента.
  • class() – присваивает элементу заданный класс. Если класса не задано, просто возвращает строку, содержащую текущий класс (или классы) элемента.
  • mousePressed() – вызывается каждый раз при нажатии кнопки мыши по элементу. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
  • doubleClicked() – вызывается каждый раз при двойном нажатии кнопкой мыши по элементу. Можно использовать для того, чтобы привязывать слушателей событий к действиям и элементам.
  • mouseWheel() – вызывается каждый раз после прокручивания колесика мыши над элементом. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
  • mouseReleased() – вызывается каждый раз после отпускания кнопки мыши над элементом. Можно использовать для того, чтобы привязывать слушателей событий к элементам.
  • mouseClicked() – вызывается каждый раз после нажатия и отпускания кнопки мыши над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • mouseMoved() – вызывается каждый раз, когда мышка двигается над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • mouseOver() – вызывается каждый раз после того, как курсор мыши помещается над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • changed() – вызывается, когда меняется значение элемента. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • input() – вызывается, когда при помощи элемента были обнаружены какие-либо данные, введенные пользователем. Этот обработчик входящих событий часто используется для обнаружения нажатий по клавишам (при использовании элемента <input>) или изменении позиции ползунка. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • mouseOut() – вызывается каждый раз после отдаления курсора мыши от элемента. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • touchStarted() – вызывается каждый раз после зарегистрированного касания. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • touchMoved() – вызывается каждый раз после движения по тачпаду. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • touchEnded() – вызывается каждый раз после зарегистрированного касания. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • dragOver() – вызывается каждый раз, когда пользователь помещает файл над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • dragLeave() – вызывается каждый раз, когда перетаскиваемый файл покидает область над элементом. Можно использовать, чтобы привязывать слушателей событий к элементам.
  • drop() – вызывается один раз, когда пользователь помещает файл над элементом, а потом отпускает кнопку мыши, «сбрасывая» его. Требуется функция обратного вызова, параметром которой будет «сбрасываемый» файл. Опционально можно воспользоваться двумя функциями обратного вызова: первая (которая необходима в любом случае) будет запускаться после загрузки «сброшенного» файла, а вторая (опциональная) – только после сброса файла (или файлов).
  • addClass() – присваивает элементу заданный класс.
  • removeClass() – снимает присваивание класса элементу.
  • child() – присоединяет дочерний элемент к родительскому элементу. Дочерний элемент можно указать в виде строкового ID, DOM-узла или объекта p5.Element. Если никакого параметра не указано, функция вернет массив дочерних DOM-узлов.
  • center() – центрирует объект p5.Element по вертикальной или горизонтальной оси (или по обеим осям сразу) относительно его родительского элемента или, если родительского элемента нет, относительно <body>. Если параметра не задано, центрируется одновременно вертикально и горизонтально.
  • html() – если указан один параметр, задает для элемента дочерний HTML-элемент, попутно удаляя все существующие дочерние HTML-элементы. Если указано два параметра, и второй параметр – это «true», то эта функция добавляет заданный HTML-элемент к существующему дочернему HTML-элементу, не удаляя его. Если никаких параметров не указано, возвращает текущий дочерний HTML-элемент.
  • position() – задает позицию элемента относительно координат (0, 0) окна. По сути, манипулирует свойствами position (задает абсолютное позиционирование, т.е. absolute), left и top DOM-объекта Style. Если никаких параметров не указано, возвращает координаты X и Y элемента в объекте.
  • style() – присваивает заданное значение (или значения) заданному свойству DOM-объекта Style. Свойство – это первый параметр, а его значения – второй, третий и так далее параметры. Если указан только один параметр, функция style() возвращает лишь значение заданного свойства, но если этот параметр задан с помощью синтаксиса CSS ('text-align:center'), то style() обработает его так, будто это несколько параметров. Кроме того, style() совместима со 2-ой и 3-ей версиями CSS. Если первый параметр – это 'rotate', 'translate' или 'position', значения последующих параметров должны иметь тип number. То есть это должно выглядеть примерно так: ('translate', 10, 100, 50).
  • attribute() – добавляет элементу новый атрибут или меняет значение уже существующего атрибута. Если значения не указано, возвращает значение заданного атрибута, или, если атрибут не задан, возвращает null.
  • removeAttribute() – удаляет атрибут заданного элемента.
  • value() – либо возвращает значение элемента (если никаких параметров не задано), либо задает значение этого элемента.
  • show() – показывает текущий элемент. По сути, присваивает свойству display DOM-объекта Style значение block.
  • hide() – скрывает текущий элемент. По сути, присваивает свойству display DOM-объекта Style значение none.
  • size() – задает ширину и высоту элемента. Можно задать автоматическую настройку ширины/высоты, указав в каждом из этим параметров AUTO (или только в одном из них). Если никаких параметров не задано, возвращает ширину и высоту элемента в объекте.
  • remove() – удаляет элемент и снимает регистрацию всех слушателей событий.

См.также

Внешние ссылки