From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/web/api/htmlelement/accesskey/index.html | 23 +++ .../api/htmlelement/animationend_event/index.html | 81 +++++++++ files/es/web/api/htmlelement/dataset/index.html | 132 --------------- files/es/web/api/htmlelement/focus/index.html | 164 ------------------ files/es/web/api/htmlelement/style/index.html | 52 ------ .../htmlelement/transitioncancel_event/index.html | 163 ++++++++++++++++++ .../api/htmlelement/transitionend_event/index.html | 183 +++++++++++++++++++++ 7 files changed, 450 insertions(+), 348 deletions(-) create mode 100644 files/es/web/api/htmlelement/accesskey/index.html create mode 100644 files/es/web/api/htmlelement/animationend_event/index.html delete mode 100644 files/es/web/api/htmlelement/dataset/index.html delete mode 100644 files/es/web/api/htmlelement/focus/index.html delete mode 100644 files/es/web/api/htmlelement/style/index.html create mode 100644 files/es/web/api/htmlelement/transitioncancel_event/index.html create mode 100644 files/es/web/api/htmlelement/transitionend_event/index.html (limited to 'files/es/web/api/htmlelement') diff --git a/files/es/web/api/htmlelement/accesskey/index.html b/files/es/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..7d73c395fc --- /dev/null +++ b/files/es/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

diff --git a/files/es/web/api/htmlelement/animationend_event/index.html b/files/es/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..8bca8b046f --- /dev/null +++ b/files/es/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationend +slug: Web/Events/animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

El evento animationend es lanzado cuando una animación CSS se ha completado.

+ +

Información General

+ +
+
Especificación
+
CSS Animations
+
Interface
+
AnimationEvent
+
Bubbles
+
Si
+
Cancelable
+
No
+
Target
+
Document, Element
+
Acción por defecto
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{ReadOnlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{ReadOnlyInline}}FloatThe amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
+ +

Eventos relacionados

+ + + +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 10c6f555f9..0000000000 --- a/files/es/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -
{{ APIRef("HTML DOM") }}
- -

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

- - - -

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

- -

Conversion de nombres

- -

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

- - - -

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

- - - -

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

- -

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

- - - -

Accediendo valores

- - - -

Definiendo valores

- - - -

Sintaxis

- - - -

Ejemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
const el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-// set the data attribute
-el.dataset.dateOfBirth = '1960-10-03';
-// Result: el.dataset.dateOfBirth === 1960-10-03
-
-delete el.dataset.dateOfBirth;
-// Result: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// Result: 'someDataAttr' in el.dataset === true
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Ver también

- - diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html deleted file mode 100644 index d615cbf12e..0000000000 --- a/files/es/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

- -

Sintaxis

- -
element.focus();
-element.focus(focusOption); // Object parameter
- -

Parámetros

- -
-
focusOptions {{optional_inline}} {{experimental_inline}}
-
Es un objeto con la siguiente propiedad:
-
-
-
preventScroll {{optional_inline}}
-
Es un valor Boolean: -
    -
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • -
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • -
-
-
-
-
- -

Ejemplos

- -

Enfocar un campo de texto

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Campo de texto.">
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

Enfocar un botón

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
-
- -

HTML

- -
<button type="button" id="myButton">Púlsame!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- - - -

Enfocar con focusOption

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
-
-
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
-<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
-</div>
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

Especificación

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

Notas

- -

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.focus")}}

- -

Ver también

- - diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html deleted file mode 100644 index 62c8903b72..0000000000 --- a/files/es/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Element.style -slug: Web/API/HTMLElement/style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -

{{ ApiRef("HTML DOM") }}

- -

Resumen

- -

Devuelve un objeto que representa el atributo style del elemento.

- -

Ejemplo

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25in";
-
- -

Notas

- -

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

- -

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

- -

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

- -

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

- -

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

- -

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

- -
elt.style.color = "blue";  // Asignación directa
-
-var st = elt.style;
-st.color = "blue";  // Asignación Indirecta
-
- -

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

- -
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";
-
- -

 

- -

Especificación

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/web/api/htmlelement/transitioncancel_event/index.html b/files/es/web/api/htmlelement/transitioncancel_event/index.html new file mode 100644 index 0000000000..3f9c622bd2 --- /dev/null +++ b/files/es/web/api/htmlelement/transitioncancel_event/index.html @@ -0,0 +1,163 @@ +--- +title: transitioncancel +slug: Web/Events/transitioncancel +tags: + - DOM + - Evento + - Referencia + - eventos +translation_of: Web/API/HTMLElement/transitioncancel_event +--- +

{{SeeCompatTable}}

+ +

El evento transitioncancel es lanzado cuando una transición CSS es cancelada.

+ +

Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
No
+
Objetivo
+
{{domxref("document")}}, {{domxref("element")}}
+
Acción por defecto
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyinline}}{{domxref("EventTarget")}}El objetivo del evento (the topmost target in the DOM tree).
type {{readonlyinline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyinline}}{{domxref("Boolean")}}Si el evento normalmente se propaga o no
cancelable {{readonlyinline}}{{domxref("Boolean")}}Si el evento es cancelable o no
propertyName{{readonlyinline}}{{domxref("DOMString")}}El nombre de la propiedad CSS asociada con la transición.
elapsedTime{{readonlyinline}}{{domxref("Float")}} +

La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de transition-delay.

+
pseudoElement{{readonlyinline}}{{domxref("DOMString")}} +

El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/api/htmlelement/transitionend_event/index.html b/files/es/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..8370f0e39e --- /dev/null +++ b/files/es/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,183 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - DOM + - Event + - Referencia + - Transiciones CSS + - Transiciones CSS3 + - TransitionEvent + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +

El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a "none", entonces el evento no será generado.

+ +

Información general

+ +
+
Especificación
+
{{SpecName("CSS3 Transitions")}}
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
Sí
+
Objetivo
+
{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}
+
Acción
+
undefined
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe 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 transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}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).
+ +

Ejemplo

+ +

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

+ +
let element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", function(event) {
+  element.innerHTML = "Done!";
+}, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]
+ 36		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10
+ 23		3.2[1]
+ 7.0.6
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

+ +

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

+ +

Véase también

+ +

La interfaz {{domxref("TransitionEvent")}}

+ + -- cgit v1.2.3-54-g00ecf