diff options
Diffstat (limited to 'files/ru/web/api/htmlelement')
| -rw-r--r-- | files/ru/web/api/htmlelement/accesskey/index.html | 74 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/dataset/index.html | 114 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/innertext/index.html | 46 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/nonce/index.html | 44 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/style/index.html | 78 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/tabindex/index.html | 134 | ||||
| -rw-r--r-- | files/ru/web/api/htmlelement/transitionend_event/index.html | 165 |
7 files changed, 285 insertions, 370 deletions
diff --git a/files/ru/web/api/htmlelement/accesskey/index.html b/files/ru/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..0230ecc9e0 --- /dev/null +++ b/files/ru/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,74 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<h2 id="Описание">Описание</h2> + +<p>Свойство <font face="Consolas, Monaco, Andale Mono, monospace"><strong>accessKey</strong></font> позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.</p> + +<div class="note"> +<p>По сути, <strong>accessKey </strong>задает значение для <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/accesskey">одноименного атрибута</a>...</p> +</div> + +<div class="warning"> +<p>Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.</p> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre>var key = elem.accessKey; +elem.accessKey = key; +</pre> + +<h2 id="sect2"> </h2> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">var elem = document.getElementById("id"); +elem.accessKey = "w"; +</pre> + +<h2 id="Немного_информации">Немного информации</h2> + +<p>Фокусировка на элемент произойдет при нажатии следующих клавиш (,где<strong> acesskey</strong> - значение свойства<code><strong> acessKey).</strong></code></p> + +<table class="standard-table" style="height: 252px; width: 388px;"> + <tbody> + <tr> + <td> + <h3 id="Браузер"><strong> Браузер</strong></h3> + </td> + <td> + <h3 id="Сочетание"> Сочетание</h3> + </td> + </tr> + <tr> + <td>Firefox</td> + <td>[Alt] [Shift] + <em>accesskey</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Chrome</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Safari</td> + <td>[Alt] + <em>accesskey</em></td> + </tr> + <tr> + <td>Opera</td> + <td>[Shift] [Esc] + <em>accesskey</em></td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/htmlelement/dataset/index.html b/files/ru/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 328b265afa..0000000000 --- a/files/ru/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -<p>{{ APIRef("HTML DOM") }}</p> - -<p>Свойство <code><strong>HTMLElement.dataset</strong></code> предоставляет доступ как для чтения, так и для изменения всех пользовательских дата-атрибутов <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) , установленных у элемента. Это <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, одна запись для каждого пользовательского атрибута данных. Обратите внимание, свойство <code><strong>dataset</strong></code> доступно только для чтения. Для записи должны использоваться его "свойства", которые представлены data-атрибутами. Также обратите внимание, что HTML <code><strong>data-</strong></code><em>атрибут</em> и соответствующий ему DOM-<code>dataset.</code><em>property</em> не имеют одно и то же имя, но они всегда похожи:</p> - -<ul> - <li>Имя пользовательского дата атрибута в HTML начинается с "<code>data-</code>". Оно может состоять из букв, цифр и символов: дефис-минус (<code>-</code>, <code>U+002D</code>), точка (<code>.</code>), двоеточие (<code>:</code>), подчеркивание (<code>_</code>). Имя НЕ МОЖЕТ включать в себя заглавные буквы.</li> - <li>Имя пользовательского дата-атрибута в Javascript — это имя того же атрибута в HTML, но с использованием нотации camelCase и без дефисов, точек и т.д.<br> - <br> - В дополнение к приведенной ниже информации вы найдете руководство по использованию HTML data-атрибутов в нашей статье <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Использование data-атрибутов</a>.</li> -</ul> - -<h3 id="Преобразование_имён">Преобразование имён</h3> - -<p><code>dash-style</code> в <code>camelCase</code>: имя пользовательского дата-атрибута преобразуется в ключ для {{ domxref("DOMStringMap") }} по следующим правилам:</p> - -<ul> - <li>удаляется префикс <code>data-</code> (вместе с дефисом);</li> - <li>дефисы (<code>U+002D</code>) со следующими за ними <span style="line-height: 1.5;">ASCII-символами </span><code>a</code><span style="line-height: 1.5;">-</span><code>z</code><span style="line-height: 1.5;"> в нижнем регистре: черта удаляется, а символ преобразуется в верхний регистр;</span></li> - <li>остальные символы (включая дефисы) остаются без изменений.</li> -</ul> - -<p><code>camelCase</code> в <code>dash-style</code>: обратное преобразование ключа в имя атрибута производится по следующим правилам:</p> - -<ul> - <li>Ограничение: сразу после дефиса не может быть ASCII-символа <code>a</code>-<code>z</code> в нижнем регистре (до преобразования);</li> - <li>добавляется префикс <code>data-</code>;</li> - <li>все ASCII-символы <code>A</code>-<code>Z</code> в верхнем регистре заменяются на дефис с символом в нижнем регистре;</li> - <li>остальные символы остаются без изменений.</li> -</ul> - -<p>Ограничение в правилах гарантирует, что эти два преобразования являются обратными друг другу.</p> - -<p>Например, атрибуту <code>data-abc-def</code> соответствует ключ <code>abcDef</code>.</p> - -<h3 id="Доступ_к_значениям">Доступ к значениям</h3> - -<ul> - <li>Атрибуты можно устанавливать и считывать по имени в camelCase (ключ) как свойство объекта dataset, например <em>element.</em>dataset.<em>keyname</em></li> - <li>Атрибуты также можно устанавливать и считывать с использованием доступа к свойствам объекта через квадратные скобки, например <em>element.</em>dataset[<em>keyname</em>]</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in">Оператор in</a> может быть использован для проверки существования атрибута.</li> -</ul> - -<h2 id="Синтаксис">Синтаксис</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Примеры">Примеры</h2> - -<pre class="brush: js notranslate"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div> - -let el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="См._также">См. также</h2> - -<ul> - <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> -</ul> diff --git a/files/ru/web/api/htmlelement/innertext/index.html b/files/ru/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..ef23b48d59 --- /dev/null +++ b/files/ru/web/api/htmlelement/innertext/index.html @@ -0,0 +1,46 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.innerText</strong></code> - это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.</p> + +<p>Изначально, данное поведение было представленно Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптированно всеми ведущими браузерами.</p> + +<p>{{domxref("Node.textContent")}} - это альтернативное свойство, которое имеет ряд отличий:</p> + +<ul> + <li><code>textContent</code> получает содержимое <em>всех</em> элементов, включая <a class="new" href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/script" title="This article hasn't been written yet. Please consider contributing!"><code><script></code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/style" title="HTML-элемент <style> содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS."><code><style></code></a>, тогда как <code>innerText</code> этого не делает.</li> + <li><code>innerText</code> умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как <code>textContent</code> этого не делает.</li> + <li>Метод <code>innerText</code> позволяет получить CSS, а <code>textContent</code> — нет.</li> +</ul> + +<h2 id="Спецификация">Спецификация</h2> + +<table> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Представлено, основываясь на <a href="https://github.com/rocallahan/innerText-spec">черновике спецификации innerText</a>. См. <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> и <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a>.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{Compat("api.Node.innerText")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/ru/web/api/htmlelement/nonce/index.html b/files/ru/web/api/htmlelement/nonce/index.html deleted file mode 100644 index e47f3aea23..0000000000 --- a/files/ru/web/api/htmlelement/nonce/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTMLElement.nonce -slug: Web/API/HTMLElement/nonce -translation_of: Web/API/HTMLOrForeignElement/nonce ---- -<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> - -<p>Свойство <strong><code>nonce</code></strong> интерфейса {{domxref("HTMLElement")}} возвращает криптографический номер, который используется политикой безопасности содержимого для определения того, будет ли разрешена дальнейшая работа с данной выборкой.</p> - -<p>В более поздних реализациях элементы, имеющие атрибут nonce, предоставляют его только скриптам (а не сторонним каналам, таким как селекторы атрибутов CSS).</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var <em>nonce</em> = HTMLElement.nonce -HTMLElement.nonce = <em>nonce</em></pre> - -<h3 id="Value">Value</h3> - -<p>Криптографический код.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Первоначальное определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - -<div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="/en-US/docs/">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> - -<p>{{Compat("api.HTMLElement.nonce")}}</p> -</div> diff --git a/files/ru/web/api/htmlelement/style/index.html b/files/ru/web/api/htmlelement/style/index.html deleted file mode 100644 index 683bfa1101..0000000000 --- a/files/ru/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: HTMLElement.style -slug: Web/API/HTMLElement/style -tags: - - API - - HTML DOM - - HTMLElement - - NeedsBrowserAgnosticism - - NeedsBrowserCompatibility - - NeedsMarkupWork - - NeedsSpecTable - - Свойство - - Ссылки -translation_of: Web/API/ElementCSSInlineStyle/style ---- -<h2 id="Кратко">Кратко</h2> - -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<p>Свойство<strong> </strong><code><strong>HTMLElement.style</strong></code> используется для получения и установки инлайновых стилей. При получении возвращается объект <a href="/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> , который содержит список из всех свойств стилей для этого элемента с значениями заданными для атрибутов , что определенны в инлайновом стиле (см. <a href="/en-US/docs/Web/HTML/Global_attributes#style"><code>атрибут</code> стиля</a>) элемента. См. <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a> для получения списка CSS свойств применимых вместе со style. </p> - -<h3 id="Настройка_стилей">Настройка стилей</h3> - -<p>Свойство style имеет тот же приоритет (и выше) в каскаде CSS как и прямая декларация стиля через атрибут style, полезен для настройки стиля отдельного специфичного элемента.</p> - -<p>Стили не следует устанавливать непосредственно через свойство <code>style</code> (например <code>elt.style = "color: blue;"</code>), поскольку оно считается доступным только для чтения и атрибут style возвращает объект <code>CSSStyleDeclaration</code> который доступен только для чтения. Вместо этого стили могут быть установлены путем присвоения значений свойствам <code>style</code>. Для добавления определенных стилей для элемента без изменения других свойств стилей предпочтительно использовать отдельные свойства <code>style</code> (например <code>elt.style.color = '...'</code>). -При использовании <br><code>elt.style.cssText = '...'</code> или <code>elt.setAttribute('style','...')</code> устанавливаются стили перезаписывая уже существующие. Обратите внимание, что имена свойств стилей задаются в camel-case а не в kebab-case <code>elt.style.<property></code> (т.е., <code>elt.style.fontSize</code>, а не <code>elt.style.font-size</code>).</p> - -<p>Объявленные стили сбрасываются присваиванием значения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">null</span></font>, <br><code>elt.style.color = null</code></p> - -<h2 id="Example" name="Example">Примеры</h2> - -<pre><code>// Устанавливает несколько стилей в одном выражении -elt.style.cssText = "color: blue; border: 1px solid black"; -// Или -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// Устанавливает определенный стиль оставляя другие значения стиля нетронутыми -elt.style.color = "blue";</code></pre> - -<h3 id="Получение_стиль-информации">Получение стиль-информации</h3> - -<p>Свойство <code>style</code> в основном не имеет пользы в части информации о стиле элемента, оно только олицетворяет собой набор CSS деклараций атрибутов style элемента, а не тех которые проистекают из стиль-правил откуда-либо ещё, таких как стилевые правила раздела {{HTMLElement("head")}}, или внешней таблицы стилей. Для получения значений всех CSS свойств элемента вы должны использовать вместо этого {{domxref("window.getComputedStyle()")}}.</p> - -<div style="overflow: hidden;"> -<pre class="brush:js">var div = document.getElementById("div1"); -div.style.marginTop = ".25in";</pre> -</div> - -<p>Следующий код показывает имена всех свойств стиля, значений, заданных явно для элемента elt и унаследованных "расчитанных" значений:</p> - -<pre class="brush:js">var elt = document.getElementById("elementIdHere"); -var out = ""; -var st = elt.style; -var cs = window.getComputedStyle(elt, null); -for (x in st) { - out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; -}</pre> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="Совместимость">Совместимость</h2> - - - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="См._также">См. также</h2> - -<ul> - <li><a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Использование динамической стиль-информации</a></li> -</ul> diff --git a/files/ru/web/api/htmlelement/tabindex/index.html b/files/ru/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index fe41116fe4..0000000000 --- a/files/ru/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: HTMLElement.tabIndex -slug: Web/API/HTMLElement/tabIndex -translation_of: Web/API/HTMLOrForeignElement/tabIndex ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<p>Свойство <code><strong>HTMLElement.tabIndex </strong>предоставляет</code> возможность вызова по кнопке Tab текущего элемента.</p> - -<div> -<div>Вызов по табуляции происходит в следующем порядке:</div> - -<ol> - <li><span style="font-size: 14px; line-height: 1.5;">элементы с положительным tabIndex. <span style="font-size: 14px; line-height: 1.5;">Элементы, имеющие одинаковое значение tabIndex вызываются в порядке появления в коде. <span style="font-size: 14px; line-height: 1.5;">Переход осуществляется от меньших tabIndex до больших tabIndex. </span></span></span></li> - <li><span style="font-size: 14px; line-height: 1.5;">Элементы, которые не поддерживают атрибут tabIndex или поддерживают но tabIndex установлен в "0", выбираются по Tab в порядке их появления в коде.</span></li> -</ol> - -<div>Элементы для которых установлена блокировка (disabled) не могут быть выбраны кнопкой Tab и не могут быть в фокусе.</div> - -<div> </div> - -<div><span style="font-size: 14px; line-height: 1.5;">Значения могут начинаться с любого числа, могут быть отрицательными и могут быть непоследовательными, однако разные браузеры можгут неправильно сработать при очень больших значениях.</span></div> - -<div> </div> -</div> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox"><em>elt</em>.tabIndex = <em>index</em>; -var <em>index</em> = <em>elt</em>.tabIndex; -</pre> - -<ul> - <li><em><var>index</var></em> - целое число</li> -</ul> - -<h2 id="Example" name="Example">Пример</h2> - -<pre class="brush:js">var b1 = document.getElementById("button1"); - -b1.tabIndex = 1; -</pre> - -<h2 id="Specification" name="Specification">Спецификация</h2> - -<p> </p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Спецификация</th> - <th scope="col">Статус</th> - <th scope="col">Коментарии</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Не было изменений с {{SpecName('DOM2 HTML')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>Не было изменений с {{SpecName('DOM1')}}.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Начальное определение</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_в_браузерах">Поддержка в браузерах</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="Accessibility/Keyboard-navigable_JavaScript_widgets">Accessibility of keyboard-navigable JavaScript widgets</a></li> - <li>The HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex"><strong>tabindex</strong></a> глобальный атрибут.</li> -</ul> diff --git a/files/ru/web/api/htmlelement/transitionend_event/index.html b/files/ru/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..dfb8542da6 --- /dev/null +++ b/files/ru/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,165 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - CSS +translation_of: Web/API/HTMLElement/transitionend_event +--- +<p><span style="line-height: 1.5;">Событие </span><code style="font-style: normal; line-height: 1.5;">transitionend</code><span style="line-height: 1.5;"> срабатывает, когда</span><span style="line-height: 1.5;"> </span><a href="/en-US/docs/CSS/Using_CSS_transitions" style="line-height: 1.5;">CSS transition</a><span style="line-height: 1.5;"> закончил свое выполнение. В случае, когда анимация удаляется до ее завершения(например, если <a href="/en-US/docs/Web/CSS/transition-property">transition-property [en-US]</a> </span><span style="line-height: 1.5;">удаляется), то событие не срабатывает.</span></p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Элемент</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("document")}}, {{domxref("element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>propertyName</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The name of the CSS property associated with the transition.</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{readonlyInline}}</td> + <td>Float</td> + <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td> + </tr> + <tr> + <td><code>pseudoElement</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">/* + * Прослушивать событие <span style="font-size: 1rem;">transitionend на определенном элементе, т.е. </span><span style="font-size: 1rem;">#slidingMenu</span> + * Затем, вызвать определенную функцию, т.е. showMessage() + */ +function showMessage() { + alert('Transition закончил свое выполнение'); +} + +var element = document.getElementById("slidingMenu"); +element.addEventListener("transitionend", showMessage, false); +</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0 as <code>webkitTransitionEnd</code></td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>10.5 as <code>oTransitionEnd</code><br> + 12 as <code>otransitionend</code><br> + 12.10 as <code>transitionend</code></td> + <td>3.2 as <code>webkitTransitionEnd</code></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1 as <code>webkitTransitionEnd</code></td> + <td>{{ CompatGeckoMobile("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10 as <code>oTransitionEnd</code><br> + 12 as <code>otransitionend</code><br> + 12.10 as <code>transitionend</code></td> + <td>3.2 as <code>webkitTransitionEnd</code></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Также">Также</h2> + +<ul> + <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> +</ul> |