Here is div-01
+
+Here is div-02
+
+ Here is div-03
+ {{APIRef("DOM")}}
-
-Resumen
- -className obtiene y establece el valor del atributo class del elemento especificado.
Sintaxis
- -var cName = elementNodeReference.className; -elementNodeReference.className = cName;- -
-
-
- cName es una variable de cadena representando la clase o la lista de clases separada por espacios, del elemento en cuestión. -
Ejemplo
- -let elm = document.getElementById('item');
-
-if(elm.className === 'active'){
- elm.className = 'inactive';
-} else {
- elm.className = 'active';
-}
-
-Notas
- -El nombre className es utilizado para esta propiedad en lugar de class para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.
className también puede ser una instancia de {{domxref("SVGAnimatedString")}} si element es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad className de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.
elm.setAttribute('class', elm.getAttribute('class'))
-
-- -
Especificaciones
- -| Especificación | -Estado | -Observaciones | -
|---|---|---|
| {{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}} | -{{Spec2("DOM WHATWG")}} | -- |
| {{SpecName("DOM4", "#dom-element-classname", "element.className")}} | -{{Spec2("DOM4")}} | -- |
| {{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}} | -{{Spec2("DOM2 HTML")}} | -Definición inicial | -
Compatibilidad con navegadores
- -{{Compat("api.Element.className")}} - -Ver también
- --
-
- {{domxref("element.classList")}} -
El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento.
- -Información General
- --
-
- Especificación -
- DOM L3 -
- Interfaz -
- {{domxref("MouseEvent")}} -
- Bubbles -
- Yes -
- Cancelable -
- Yes -
- Target -
- Element -
- Default Action -
- Varies -
Propiedades
- -| Property | -Type | -Description | -
|---|---|---|
target {{readonlyInline}} |
- EventTarget |
- The event target (the topmost target in the DOM tree). | -
type {{readonlyInline}} |
- DOMString |
- The type of event. | -
bubbles {{readonlyInline}} |
- Boolean |
- Whether the event normally bubbles or not | -
cancelable {{readonlyInline}} |
- Boolean |
- Whether the event is cancellable or not? | -
view {{readonlyInline}} |
- WindowProxy |
- document.defaultView (window of the document) |
-
detail {{readonlyInline}} |
- long (float) |
- A count of consecutive clicks that happened in a short amount of time, incremented by one. | -
currentTarget {{readonlyInline}} |
- EventTarget | -The node that had the event listener attached. | -
relatedTarget {{readonlyInline}} |
- EventTarget | -For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. |
-
screenX {{readonlyInline}} |
- long | -The X coordinate of the mouse pointer in global (screen) coordinates. | -
screenY {{readonlyInline}} |
- long | -The Y coordinate of the mouse pointer in global (screen) coordinates. | -
clientX {{readonlyInline}} |
- long | -The X coordinate of the mouse pointer in local (DOM content) coordinates. | -
clientY {{readonlyInline}} |
- long | -The Y coordinate of the mouse pointer in local (DOM content) coordinates. | -
button {{readonlyInline}} |
- unsigned short | -The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. | -
buttons {{readonlyInline}} |
- unsigned short | -The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info. | -
mozPressure {{readonlyInline}} |
- float | -The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). | -
ctrlKey {{readonlyInline}} |
- boolean | -true if the control key was down when the event was fired. false otherwise. |
-
shiftKey {{readonlyInline}} |
- boolean | -true if the shift key was down when the event was fired. false otherwise. |
-
altKey {{readonlyInline}} |
- boolean | -true if the alt key was down when the event was fired. false otherwise. |
-
metaKey {{readonlyInline}} |
- boolean | -true if the meta key was down when the event was fired. false otherwise. |
-
Ejemplo
- -<div id="prueba"></div>
-
-<script>
- document.getElementById("prueba").addEventListener("click", function( event ) {
- // presentar la cuenta de clicks realizados sobre el elemento con id "prueba"
- event.target.innerHTML = "Conteo de Clicks: " + event.detail;
- }, false);
-</script>
-
-
-Compatibilidad con Navegadores
- -Internet Explorer
- -Internet Explorer 8 & 9 tiene problemas con elementos con un valor {{cssxref("background-color")}} de transparent que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.
Un ejemplo aqui
- -¿Cómo evitarlo?
- --
-
- Para IE9 only:
-
-
-
- Asignar
{{cssxref("background-color")}}: rgba(0,0,0,0)
- - Asignar
{{cssxref("opacity")}}: 0y asignar explicitamente {{cssxref("background-color")}} un valor diferente atransparent
-
- - Asignar
- Para IE8 and IE9:
-
-
-
- Asignar
filter: alpha(opacity=0);y asignar explicitamente {{cssxref("background-color")}} un valor diferente atransparent
-
- - Asignar
Safari Mobile
- -En Safari Mobile 7.0+ ( también algunas versiones anteriores) presenta un problema cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div.
- -¿Cómo evitarlo?
- --
-
- Asignar {{cssxref("cursor")}}
: pointer;en el elemento o uno de sus contendores.
- - Ubicar un attributo
onclick="void(0)"al elemento o cualquiera de sus elementos contenedores, menos {{HTMLElement("body")}}.
- - Usar elementos interactivos (e.g. {{HTMLElement("a")}}) en lugar de no interactivos (e.g. {{HTMLElement("div")}}). -
- No usar delegacion del evento click. -
Lo siguientes elementos son considerados por Safari típicamente interactivos
- --
-
- {{HTMLElement("a")}} (but it must have an
href)
- - {{HTMLElement("area")}} (but it must have an
href)
- - {{HTMLElement("button")}} -
- {{HTMLElement("img")}} -
- {{HTMLElement("input")}} -
- {{HTMLElement("label")}} (but it must be associated with a form control) -
- {{HTMLElement("textarea")}} -
- This list is incomplete; you can help MDN by doing further testing/research and expanding it. -
Véase también
- --
-
- {{event("mousedown")}} -
- {{event("mouseup")}} -
- {{event("mousemove")}} -
- {{event("click")}} -
- {{event("dblclick")}} -
- {{event("mouseover")}} -
- {{event("mouseout")}} -
- {{event("mouseenter")}} -
- {{event("mouseleave")}} -
- {{event("contextmenu")}} -
{{ APIRef("DOM") }}
- -La propiedad de sólo lectura Element.clientHeight devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.
clientHeight puede ser calculado como CSS height + CSS padding - alto de la barra horizontal (si existe).
-
-
-Nota: Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.
-Sintaxis
- -var h = element.clientHeight;- -
h es un entero que representa el alto de element en píxeles.
Ejemplo
- -- -
Specification
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}} | -{{Spec2('CSSOM View')}} | -- |
Notas
- -clientHeight es una propiedad introducida en el modelo de objeto de Internet Explorer.
Ver también
- --
-
- {{domxref("Element.offsetHeight")}} -
- {{domxref("Element.scrollHeight")}} -
- Determining the dimensions of elements -
- MSDN: Measuring Element Dimension and Location -
{{ ApiRef("DOM") }}
- -Resumen
- -El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto esrtl (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. clientLeft NO incluyemargin-left o padding-left. clientLeft es de sólo lectura.
Las aplicaciones "Gecko-based applications" implementan clientLeft a partir de Gecko 1.9 (Firefox 3, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.
Sintaxis
- -var left = element.clientLeft; -- -
Ejemplo
- -
-
-
-
-
-LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}padding-top
- -Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.
- -Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.
La imagen del gato y el texto vienen de www.best-cat-art.com
- -padding-bottom
-Cuando la propiedad layout.scrollbar.side se establece a 1 o a 3 y la dirección de texto está puesta a RTL, entonces la barra de desplazamiento se pone a la izquierda y esto afecta a la forma en que se calcula clientLeft.
- -Especificación
- -No es parte de ninguna especificación W3C.
- -Notas
- -clientLeft apareció por primera vez en el modelo de objetos de MS IE DHTML.
La posición de la barra de desplazamiento vertical en textosrtl depende de la preferencias de layout.scrollbar.side
- -Referencias
- - diff --git a/files/es/web/api/element/clientleft/index.md b/files/es/web/api/element/clientleft/index.md new file mode 100644 index 00000000000000..402e1f20c97d1c --- /dev/null +++ b/files/es/web/api/element/clientleft/index.md @@ -0,0 +1,59 @@ +--- +title: element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientLeft +--- +{{ APIRef }} + +## Resumen + +El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto es *rtl* (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. `clientLeft` NO incluye *margin-left* o *padding-left*. `clientLeft` es de sólo lectura. + +Las aplicaciones "[Gecko](es/Gecko)-based applications" implementan `clientLeft` a partir de Gecko 1.9 ([Firefox 3](es/Firefox_3), ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores. + +## Sintaxis + +```js +var left = element.clientLeft; +``` + +## Ejemplo + +```html hidden +
+
+```
+
+{{EmbedLiveSample("",400,300)}}
+
+
+
+LeftTopRightBottompadding-top
+ +Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.
+ +Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.
La imagen del gato y el texto vienen de www.best-cat-art.com
+ +padding-bottom
+- -
{{ ApiRef() }}
- -Resumen
- -El ancho del borde superior de un elemento en pixel. No incluye ni elmargin-top , ni elpadding-top . clientTop es de sólo lectura.
Las aplicaciones "Gecko-based applications" implementan el uso de clientTop a partir de Gecko 1.9 (Firefox 3,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.
Sintaxis
- -vartop = element.clientTop; -- -
Ejemplo
- -
-
-
-
-
-LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}padding-top
- -Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.
- -Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.
La imagen del gato y el texto vienen de www.best-cat-art.com
- -padding-bottom
-Especificación
- -No es parte de ninguna especificación W3C.
- -Notas
- -clientTop se presento por primera vez en el modelo de objetos de MS IE DHTML.
Referencias
- - diff --git a/files/es/web/api/element/clienttop/index.md b/files/es/web/api/element/clienttop/index.md new file mode 100644 index 00000000000000..77462b02f854b6 --- /dev/null +++ b/files/es/web/api/element/clienttop/index.md @@ -0,0 +1,55 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientTop +--- +{{ ApiRef }} + +## Resumen + +El ancho del borde superior de un elemento en pixel. No incluye ni el *margin-top* , ni el *padding-top* . `clientTop` es de sólo lectura. + +Las aplicaciones "[Gecko](es/Gecko)-based applications" implementan el uso de `clientTop` a partir de Gecko 1.9 ([Firefox 3](es/Firefox_3),ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores. + +## Sintaxis + +```js +vartop = element.clientTop; +``` + +## Ejemplo + +```html hidden +
+
+```
+
+{{EmbedLiveSample("",400,300)}}
+
+
+
+LeftTopRightBottompadding-top
+ +Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.
+ +Todos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.
La imagen del gato y el texto vienen de www.best-cat-art.com
+ +padding-bottom
+{{ APIRef("DOM") }}
- -La propiedad Element.clientWidth es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.
-
-
-El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.
-Sintaxis
- -var intElemClientWidth = element.clientWidth; -- -
intElemClientWidth será un entero que corresponde con el clientWidth del elemento en pixels. clientWidth es de sólo-lectura.
- -Ejemplo
- -- -
Especificación
- -| Especificación | -Estado | -Observaciones | -
|---|---|---|
| {{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}} | -{{Spec2("CSSOM View")}} | -- |
Notas
- -clientWidth fue introducida en el modelo de objetos DHTML de MS IE.
Compatibilidad con navegadores
- -{{Compat("api.Element.clientWidth")}}
- -Ver también
- --
-
- {{domxref("HTMLElement.offsetWidth")}} -
- {{domxref("Element.scrollWidth")}} -
- Determining the dimensions of elements -
- MSDN Measuring Element Dimension and Location -
{{APIRef('Shadow DOM')}}
-
-El método closest() de la interfaz {{domxref("Element")}} devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve null.
Sintaxis
- -var closestElement = element.closest(selectors); -- -
Parámetros
- --
-
selectorses un {{domxref("DOMString")}} que contiene una lista de selectores como"p:hover, .toto + q"
- elementes el {{domxref("Element")}} en la parte superior del árbol de elementos a tratar.
-
Valor del resultado
- --
-
closestElementes el {{domxref("Element")}} ascendiente más cercano al elemento actual. Puede sernull.
-
Excepciones
- --
-
- Se lanza una excepción
SyntaxErrorsiselectorsno es una lista de selectores válida.
-
Ejemplo
- -HTML
- -<article> - <div id="div-01">Here is div-01 - <div id="div-02">Here is div-02 - <div id="div-03">Here is div-03</div> - </div> - </div> -</article>- -
JavaScript
- -var el = document.getElementById('div-03');
-
-var r1 = el.closest("#div-02");
-// returns the element with the id=div-02
-
-var r2 = el.closest("div div");
-// returns the closest ancestor which is a div in div, here is div-03 itself
-
-var r3 = el.closest("article > div");
-// returns the closest ancestor which is a div and has a parent article, here is div-01
-
-var r4 = el.closest(":not(div)");
-// returns the closest ancestor which is not a div, here is the outmost article
-
-Polyfill
- -Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll() (o un equivalente prefijado, es decir IE9+), existe un polyfill:
if (!Element.prototype.matches) {
- Element.prototype.matches = Element.prototype.msMatchesSelector ||
- Element.prototype.webkitMatchesSelector;
-}
-
-if (!Element.prototype.closest) {
- Element.prototype.closest = function(s) {
- var el = this;
-
- do {
- if (el.matches(s)) return el;
- el = el.parentElement || el.parentNode;
- } while (el !== null && el.nodeType === 1);
- return null;
- };
-}
-
-Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.
- -if (window.Element && !Element.prototype.closest) {
- Element.prototype.closest =
- function(s) {
- var matches = (this.document || this.ownerDocument).querySelectorAll(s),
- i,
- el = this;
- do {
- i = matches.length;
- while (--i >= 0 && matches.item(i) !== el) {};
- } while ((i < 0) && (el = el.parentElement));
- return el;
- };
-}
-
-
-Especificación
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}} | -{{Spec2('DOM WHATWG')}} | -Definición inicial. | -
Compatibilidad con navegadores
- -
-
-
-{{Compat("api.Element.closest")}}
- -Notas de compatibilidad
- --
-
- En Edge
document.createElement(element).closest(element)devolveránullsi el elemento no es el primero del DOM
-
Ver también
- --
-
- La interfaz {{domxref("Element")}}. -
- - - -
-
- Otros métodos que toman selectores: {{domxref("element.querySelector()")}} y {{domxref("element.matches()")}}.-
-
{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
- -El método computedStyleMap() de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}.
Sintaxis
- -var stylePropertyMapReadOnly = Element.computedStyleMap()- -
Parámetros
- -Ninguno.
- -Valor de resultado
- -Una interfaz {{domxref("StylePropertyMapReadOnly")}}.
- -Ejemplos
- -Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.
- -<p> - <a href="https://example.com">Link</a> -</p> -<dl id="regurgitation"></dl>- -
Añadimos un poco de CSS
- -a {
- --colour: red;
- color: var(--colour);
-}
-
-Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando computedStyleMap().
// obtenemos el elemento
-const myElement = document.querySelector('a');
-
-// obtenemos la <dl> que llenaremos
-const stylesList = document.querySelector('#regurgitation');
-
-// recuperamos todos los estilos calculados con computedStyleMap()
-const allComputedStyles = myElement.computedStyleMap();
-
-// iteramos a través del mapa de todas las propiedades y valores, añadiendo un <dt> y <dd> para cada mapa
-for (const [prop, val] of allComputedStyles) {
- // propiedades
- const cssProperty = document.createElement('dt');
- cssProperty.appendChild(document.createTextNode(prop));
- stylesList.appendChild(cssProperty);
-
- // valores
- const cssValue = document.createElement('dd');
- cssValue.appendChild(document.createTextNode(val));
- stylesList.appendChild(cssValue);
-}
-
-En navegadores que soportan computedStyleMap(), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.
{{EmbedLiveSample("Examples", 300, 300)}}
- -¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el 'a' a un 'p', y notarás una diferencia en los valores calculados por defecto del margin-top y margin-bottom.
Especificaciones
- -| Especificación | -Estado | -Comentario | -
|---|---|---|
| {{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}} | -{{Spec2('CSS Typed OM')}} | -Definición inicial. | -
Compatibilidad con navedadores
- - - -{{Compat("api.Element.computedStyleMap")}}
diff --git a/files/es/web/api/element/computedstylemap/index.md b/files/es/web/api/element/computedstylemap/index.md new file mode 100644 index 00000000000000..baa066f08d1df2 --- /dev/null +++ b/files/es/web/api/element/computedstylemap/index.md @@ -0,0 +1,92 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - Experimental + - Houdini + - Method + - Reference + - StylePropertyMapReadOnly + - computedStyleMap() +translation_of: Web/API/Element/computedStyleMap +--- +{{APIRef}}{{SeeCompatTable}} + +El método `computedStyleMap()` de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}. + +## Sintaxis + +```js +var stylePropertyMapReadOnly = Element.computedStyleMap() +``` + +### Parámetros + +Ninguno. + +### Valor de resultado + +Una interfaz {{domxref("StylePropertyMapReadOnly")}}. + +## Ejemplos + +Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor. + +```html ++ Link +
+- que llenaremos
+const stylesList = document.querySelector('#regurgitation');
+
+// recuperamos todos los estilos calculados con computedStyleMap()
+const allComputedStyles = myElement.computedStyleMap();
+
+// iteramos a través del mapa de todas las propiedades y valores, añadiendo un
- y
- para cada mapa
+for (const [prop, val] of allComputedStyles) {
+ // propiedades
+ const cssProperty = document.createElement('dt');
+ cssProperty.appendChild(document.createTextNode(prop));
+ stylesList.appendChild(cssProperty);
+
+ // valores
+ const cssValue = document.createElement('dd');
+ cssValue.appendChild(document.createTextNode(val));
+ stylesList.appendChild(cssValue);
+}
+```
+
+En [navegadores que soportan `computedStyleMap()`](/es/docs/Web/API/Element/computedStyleMap#Browser_compatibility), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.
+
+{{EmbedLiveSample("Examples", 300, 300)}}
+
+¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el '`a`' a un '`p`', y notarás una diferencia en los valores calculados por defecto del `margin-top` y `margin-bottom`.
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
diff --git a/files/es/web/api/element/getattribute/index.html b/files/es/web/api/element/getattribute/index.html
deleted file mode 100644
index 51b79cc14ba0cb..00000000000000
--- a/files/es/web/api/element/getattribute/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Element.getAttribute()
-slug: Web/API/Element/getAttribute
-tags:
- - API
- - DOM
- - metodo
-translation_of: Web/API/Element/getAttribute
----
-{{APIRef("DOM")}}- -
Resumen
- -
- -getAttribute()devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tantonullcomo""(una cadena vacía); ver Notes para más detalles.Sintaxis
- -var atributo = element.getAttribute(nombreAtributo); -
- -donde
- --
-
atributoes una cadena que contiene el valor del atributonombreAtributo.
- nombreAtributoes el nombre del atributo del cual se quiere obtener el valor.
-
Ejemplo
- -var div1 = document.getElementById("div1"); -var align = div1.getAttribute("align"); - -alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1"- -Notas
- -Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML,
- -getAttribute()convierte a minúsculas el argumento antes de proceder.Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven
- -nullcuando el atributo especificado no existe en el elemento especificado y esto es lo que establece el actual borrador de la especificación del DOM. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una cadena vacía, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización degetAttribute()si es posible que el atributo requerido no exista en el elemento especificado.{{DOMAttributeMethods}}- -Especificación
- --
-
- DOM Level 2 Core: getAttribute (introducido en DOM Level 1 Core) -
- HTML 5: APIs in HTML documents -
{{ APIRef("DOM") }}
- -Sumario
- -Dados namespace y nodeName del element, devuelve su
- -Attr.Sintaxis
- -attributeNode = element.getAttributeNodeNS(namespace,nodeName) -
- --
-
attributeNodees el nodo para el atributo especificado.
- namespacees la cadena que define el namespace del atributo.
- nodeNamees la cadena que define el name del atributo.
-
== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre
- -Notas
- -
- -getAttributeNodeNSes más específica getAttributeNode en el sentido de que puedes especificar atributos de un namespace en particular. Su método setter es setAttributeNodeNS.{{ DOMAttributeMethods() }}
- -Especificación
- -DOM Level 2 Core: getAttributeNodeNS
diff --git a/files/es/web/api/element/getattributenodens/index.md b/files/es/web/api/element/getattributenodens/index.md new file mode 100644 index 00000000000000..c51d0c5c157f27 --- /dev/null +++ b/files/es/web/api/element/getattributenodens/index.md @@ -0,0 +1,39 @@ +--- +title: Element.getAttributeNodeNS() +slug: Web/API/Element/getAttributeNodeNS +tags: + - API + - DOM + - Referencia + - metodo +translation_of: Web/API/Element/getAttributeNodeNS +--- +{{ APIRef }} + +## Sumario + +Dados namespace y nodeName del element, devuelve su `Attr` . + +## Sintaxis + +```js +attributeNode = element.getAttributeNodeNS(namespace,nodeName) +``` + +- `attributeNode` es el nodo para el atributo especificado. +- `namespace` es la cadena que define el namespace del atributo. +- `nodeName` es la cadena que define el name del atributo. + +## Notas + +`getAttributeNodeNS` es más específica [getAttributeNode](en/DOM/element.getAttributeNode) en el sentido de que puedes especificar atributos de un namespace en particular. Su método setter es [setAttributeNodeNS](en/DOM/element.setAttributeNodeNS). + +{{ DOMAttributeMethods() }} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 5cb530440f8115..00000000000000 --- a/files/es/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: element.getBoundingClientRect -slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Cliente - - DOM - - Elemento - - Minimo - - Referencia - - metodo -translation_of: Web/API/Element/getBoundingClientRect ---- -{{APIRef("DOM")}}- -El método
- -Element.getBoundingClientRect()devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport).Sintaxis
- -domRect = element.getBoundingClientRect();
- -Valor
- -El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las CSS border-boxes asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura
- -left,top,right,bottom,x,y,width, andheightdescribiendo la border-box total en pixels. Exceptowidthandheightlas propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.
- -
Las border-boxes vacías son ignoradas. Si todas las border-boxes del elemento estan vacías, entonces se devuelve un rectángulo con
- -widthandheightiguales a cero donde eltopy elleftson el top-left de la border-box de la primera CSS box (en onden de contenido) para el elemento.La cantidad de scrolling realizado en la ventana (o cualquier otro elemento scrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (
- -top,left,bottom, andright) cambián sus valores cada vez que la posición de scrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el bounding rectangle relativo a la esquina top-left del documento, hay que añadir la posición de scrolling actual a las propiedadestopandleft(dicha posición de scrolling puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el bounding rectangle independiente de la posición de scrolling.Fallback para todos los navegadores
- -Los scripts que requieran una alta compatibilidad cross-browser pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de
- -window.scrollXywindow.scrollY.Si no se tiene acceso a esas propiedades puede usarse el siguiente código:// Para scrollX -(((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft -// Para scrollY -(((t = document.documentElement) || (t = document.body.parentNode)) - && typeof t.scrollTop == 'number' ? t : document.body).scrollTop -
- -Ejemplo
- -// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height -var rect = obj.getBoundingClientRect(); -
- -Especificaciones
- -- -
- -- - - -Especificación -Estado -Comentario -- - -{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}} -{{Spec2("CSSOM View")}} -Definición inicial -Notas
- -El objeto
- -DOMRectdevuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvíanDOMRectReadOnlyde forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objetoClientRectMSDN:ClientRect, devuelto impide rellenar los valoresxey.Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades
- -left,top,right, andbottom.Las propiedades en el objeto
- -DOMRectdevuelto no son suyas. Mientras que el operadorinyfor...inencontrarán las propiedades devueltas, otras API comoObject.keys()fallarán. Además, e inesperadamente, ES2015 y nuevas características comoObject.assign()y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.rect = elt.getBoundingClientRect() -// El resultado en emptyObj es {} -emptyObj = Object.assign({}, rect) -emptyObj = { ...rect } -{width, ...emptyObj} = rect -- -Compatibilidad en navegadores
- -{{Compat("api.Element.getBoundingClientRect")}}
- -Ver también
- --
-
- {{domxref("Element.getClientRects", "getClientRects()")}} -
- MSDN:
getBoundingClientRect
- - MSDN:
ClientRect, una versión anterior aDOMRect
-
{{ ApiRef("DOM") }}
- -El método
- -Element.getClientRects()devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.Sintaxis
- -
- -var rectCollection = object.getClientRects();Devuelve
- -El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura:
- -left,top,rightybottom, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del viewport. En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el<svg>externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el<svg>externo (y serán transformados por las trasnformaciones del<svg>externo, si estas existen).{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades
- -widthyheightal objeto TextRectangle.") }}La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.
- -Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.
- -Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos
- -display:none, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas
- -left,top,rightybottompueden aún tener significado.Es posible que los valores de desplazamiento sean fracciones de pixel.
- -Ejemplo
- -var rects = obj.getClientRects(); -var numLines = rects.length; -
- -Especificación
- -No forma parte de ninguna especificación W3C.
- -Notas
- -
- -getClientRects()apareció por primera vez en el modelo de objeto de MS IE DHTML.Referencias
- - diff --git a/files/es/web/api/element/getclientrects/index.md b/files/es/web/api/element/getclientrects/index.md new file mode 100644 index 00000000000000..289f64e34d8eea --- /dev/null +++ b/files/es/web/api/element/getclientrects/index.md @@ -0,0 +1,55 @@ +--- +title: element.getClientRects +slug: Web/API/Element/getClientRects +tags: + - NeedsBrowserCompatibility + - NeedsExample + - NeedsLiveSample + - NeedsUpdate + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getClientRects +--- +{{ APIRef }} + +El método `Element.getClientRects()` devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador. + +## Sintaxis + +```js +var rectCollection = object.getClientRects(); +``` + +## Devuelve + +El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: `left`, `top`, `right` y `bottom`, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del _viewport._ En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el `