Myagkij в 16:37, 21 сентября 2018

2018-09-21T16:37:27Z

Новая страница

{{JavaScript панель перехода}}

{{Перевод от Сubewriter}}
{{Myagkij-редактор}}

{{Черновик}}

= Класс p5.Element <ref>[https://p5js.org/reference/#/p5.Element p5js.org - p5.Element]</ref>=

==Описание==

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

==Поля==

* [[JavaScript:Библиотеки/p5.dom/Класс p5.Element/elt|elt]] – это HTML-элемент, обернутый объектом p5.Element. На нем можно вызывать все стандартные HTML-функции.

==Методы==

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

=См.также=

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

<references />
{{SEO
|Заголовок статьи=JavaScript: Класс p5.Element / Онлайн справочник - wikihandbk.com
|Ключевые слова=Класс p5.Element,
|Описание статьи=
|Адрес страницы для schemaNewsArticle=<nowiki>http://wikihandbk.com/wiki/JavaScript:Библиотеки/p5.dom/Класс p5.Element</nowiki>
|Изображение статьи для schemaNewsArticle=<nowiki></nowiki>
|Высота изображения статьи для schemaNewsArticle=
|Ширина изображения статьи для schemaNewsArticle=
|Дата публикации для schemaNewsArticle=2018-09-15
|Автор=Мякишев Е.А.
|Издатель=myagkij
|Логотип издателя для schemaNewsArticle=<nowiki>http://wikihandbk.com/ruwiki/images/6/61/Tech_geek_logo_1x.jpg</nowiki>
|Ширина логотипа издателя для schemaNewsArticle=60
|Высота логотипа издателя для schemaNewsArticle=45
}}

JavaScript:Библиотеки/p5.dom/Класс p5.Element - История изменений

Myagkij в 16:37, 21 сентября 2018