recursal/MDN huggingface dataset:
HTMLElement.offsetTop
=====================

La propiedad de sólo lectura **`HTMLElement.offsetTop`** retorna la distancia del elemento actual respecto al borde superior del nodo `offsetParent`.

Sintaxis
--------
```

topPos = element.offsetTop;
```

### Parámetros

* `topPos` es el número de pixels desde el borde superior del elemento padre *más cercano posicionado de forma relativa*.
Ejemplo
-------


```js
var d = document.getElementById("div1");
var topPos = d.offsetTop;

if (topPos > 10) {
  // objeto está posicionado a más de
  // de 10 pixels de distancia de su padre
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsettop |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

De conformidad con la especificación, esta propiedad devolverá el valor `null` en Webkit si el elemento está oculto (`style.display` de este elemento o de cualquier padre es `"none"`) o si `style.position` del elemento en sí está configurada como `"fixed"`.

Esta propiedad devolverá `null` en Internet Explorer (9) si `style.position` del elemento en sí se establece en `"fixed"`. (Tener `display:none` no afecta a este navegador).
HTMLElement.offsetHeight
========================

La propiedad de sólo lectura **`HTMLElement.offsetHeight`** devuelve el alto de un elemento, incluyendo el *padding* vertical y los bordes, en píxeles, como un número entero.

Generalmente, `offsetHeight` es una medida en píxeles que representa la altura CSS del elemento, incluyendo cualquier borde, padding, y barras de desplazamiento horizontales (si existieran). No incluye el alto de pseudo-elementos como `::before` y `::after`. Para el objeto body del documento, la medida incluye la altura total del contenido lineal en lugar de la altura CSS del elemento. Los elementos flotantes que se extienden por debajo de otros contenidos lineales son ignorados

Si un elemento está oculto (por ejemplo, al establecer `style.display` a `"none"` en el elemento o uno de sus ancestros), se devuelve `0`.

**Nota:** Esta propiedad redondea el valor a un entero. Si necesitas un valor decimal, usa `element.getBoundingClientRect()`.

Sintaxis
--------
```

var intElemOffsetHeight = element.offsetHeight;
```


`intElemOffsetHeight` es una variable que almacena el entero correspondiente al valor de `offsetHeight` en píxeles de un elemento. La propiedad `offsetHeight` es de sólo lectura.

Ejemplo
-------

![Image:Dimensions-offset.png](/es/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

El ejemplo de la imagen de superior muestra una barra de desplazamiento y un `offsetHeight` que cabe en la ventana. Sin embargo, los elementos no desplazables podrían tener un `offsetHeight` mucho más grande que el área visible. Esos elementos están típicamente contenidos en elementos desplazables (scroll); con lo cual esos elementos no desplazables podrían ser parcial o completamente invisibles, dependiendo de la configuración de `scrollTop` del elemento contenedor.

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

### Notas

`offsetHeight` es una pripiedad del modelo del objeto DHTML que fue inicialmente introducido por MSIE. A veces se le conoce como las dimensiones físicas/gráficas de un elemento, o la altura `border-box` del elemento.

Ver también
-----------

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth`
* Determinando las dimensiones de los elementos (en-US)
* MSDN Midiendo las dimensiones y ubicación de los elementos
HTMLElement.contentEditable
===========================

La propiedad **`contentEditable`** de la interfaz `HTMLElement` especifica si el elemento es editable o no. Este atributo puede tener los siguientes valores:

* `'true'` indica si el elemento es `contenteditable`.
* `'false'` indica que el elemento no puede ser editado.
* `'inherit'` indica que el elemento hereda el estado editable del padre.

Se puede usar la propiedad `HTMLElement.isContentEditable` (en-US) para comprobar el valor `Boolean` de esta propiedad.

Sintáxis
--------
```

editable = element.contentEditable
element.contentEditable = 'true'
```

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # contenteditable |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Making content editable
* `HTMLElement.isContentEditable` (en-US)
* The `contenteditable` global attribute.
Element.accessKey
=================

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

**Nota:** 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).
HTMLElement.click()
===================

El método **`HTMLElement.click()`** simula el click de un ratón físico en un elemento HTML.

Cuando `click()` se usa en un elemento que soporte este método (como un elemento `<input>`), el elemento lanza el evento asociado al click. Luego, este evento iniciará otros eventos asociados al clicado en elementos más altos en la jerarquía del documento html (o de la cadena de eventos).

Sintaxis
--------
```

elemento.click()
```

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # dom-click-dev |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement.offsetWidth
=======================

La propiedad de solo lectura **`HTMLElement.offsetWidth`** devuelve el ancho del layout del elemento. Esta medida incluye los bordes del elemento asignados al mismo en los estilos CSS.

Sintáxis
--------
```

var offsetWidth =element.offsetWidth;
```


**`offsetWidth`** es una propiedad de solo lectura.

**Nota:** Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: `element.getBoundingClientRect()`.

Ejemplo
-------

![Image:Dimensions-offset.png](/es/docs/Web/API/HTMLElement/offsetWidth/dimensions-offset.png)

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetwidth |

### Notas

`offsetWidth` es una propiedad del DHTML "object model" que fue inicialmente introducido por MSIE. A veces es referido como box-width.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Links Relacionados
------------------

* `Element.clientWidth`
* `Element.scrollWidth`
* Determining the dimensions of elements (en-US)
* MSDN Measuring Element Dimension and Locati
Stylesheet.type
===============

### Resumen

type especifica el lenguaje de la hoja de estilo.

### Sintaxis
```

string = stylesheet.type
```

### Ejemplo
```

 ss.type = "text/css";
```

### Especificación

type
Stylesheet.parentStyleSheet
===========================

### Resumen

Devuelve la hoja de estilo que incluye a la que está en curso, si existe.

### Sintaxis
```

objRef = stylesheet.parentStyleSheet
```

### Ejemplo
```

// encuentra la hoja de estilo de alto nivel
if (stylesheet.parentStyleSheet) {
  sheet = stylesheet.parentStyleSheet;
}
else
{ sheet = stylesheet; }
```

### Notas

Esta propiedad devuelve NULL si la hoja de estilo actual es una hoja de estilo de alto nivel o si la inclusión de hojas de estilo no está implementada.

### Specification

parentStyleSheet
Stylesheet.media
================

### Resumen

**media** Especifica el medio al que se tiene intención de aplicar la hoja de estilo.

### Sintaxis
```

medium = stylesheet.media
stylesheet.media = medium
```

### Parámetros

* `medium` es una cadena que describe un medio único o una lista de valores separados por comas.
### Ejemplo
```

<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
```

### Notas

El valor por defecto para media es "screen."

### Especificación

DOM Level 2 Styles - STYLESHEET
Stylesheet.disabled
===================

### Resumen

Esta propiedad indica si es se aplica o no, la hoja de estilo actual.

### Sintaxis
```

bool = stylesheet.disabled
```

### Ejemplo
```

// si la hoja de estilo está deshabilitada...
if (stylesheet.disabled) {
   // apply style in-line
}
```

### Especificación

disabled
Stylesheet.title
================

### Resumen

**title** devuelve el título de la hoja de estilo que se está usando.

### Notas

El título es a menudo especificado en el ownerNode.

### Especificación

title
Stylesheet.ownerNode
====================

### Resumen

**ownerNode** devuelve el nodo que asocia la hoja de estilo con el documento.

### Sintaxis
```

objRef = stylesheet.ownerNode
```

### Ejemplo
```

<html>
 <head>
  <link rel="StyleSheet" href="example.css" type="text/css" />
  <script>
   function stilo() {
    alert(document.styleSheets[0].ownerNode);
   }
  </script>
 </head>
 <body>
```


Thunder
```

  <button onclick="stilo()">ss</button>
 </body>
</html>
// displays "object HTMLLinkElement"
```

### Notas

Para el HTML, **ownerNode** correspondería a un elemento LINK o STYLE. Para XML, serían las instrucciones del proceso de enlace. Para las hojas de estilo que están incluidas en otras hojas de estilo, este valor es NULL.

### Especificación

DOM Level 2 Styles - STYLESHEET
stylesheet.href
===============

### Resumen

Devuelve la localización de la hoja de estilo.

### Sintaxis
```

uri = stylesheet.href
```

### Parámetros

* `uri` es una cadena que contiene la URI de la hoja de estilo.
### Ejemplo
```

 // en una máquina local:
 <html>
  <head>
   <link rel="StyleSheet" href="example.css" type="text/css" />
   <script>
    function sref() {
     alert(document.styleSheets[0].href);
    }
   </script>
  </head>
  <body>
   <div class="thunder">Thunder</div>
   <button onclick="sref()">ss</button>
  </body>
 </html>
// returns "file:////C:/Windows/Desktop/example.css
```

### Notas

Si la hoja de estilo es un enlace, el valor de este atributo es su localización. Para las hojas de estilo in-line, el valor del atributo es NULL.

### Specification

href
event.which
===========

### Resumen

Devuelve el `keyCode` de la tecla presionada, o el codigo del caracter (`charCode`) de la tecla alfanumerica presionada.

### Sintaxis
```

var keyResult = event.which;
```


`keyResult` contiene el codigo numerico para una tecla en particular, dependiendo si la tecla presionada es alfanumerica o no-alfanumerica. Por favor mire `charCode` y `keyCode` para mas informacion.

### Ejemplo
```

<html>
<head>
<title>charCode/keyCode/which example</title>

<script type="text/javascript">

function showKeyPress(evt)
{
alert("onkeypress handler: \n"
      + "keyCode property: " + evt.keyCode + "\n"
      + "which property: " + evt.which + "\n"
      + "charCode property: " + evt.charCode + "\n"
      + "Character Key Pressed: "
      + String.fromCharCode(evt.charCode) + "\n"
     );
}

function keyDown(evt)
{
alert("onkeydown handler: \n"
      + "keyCode property: " + evt.keyCode + "\n"
      + "which property: " + evt.which + "\n"
     );
}

</script>
</head>

<body
 onkeypress="showKeyPress(event);"
 onkeydown="keyDown(event);"
>

<p>Por favor presione cualquier tecla.</p>

</body>
</html>
```


**Nota:** El codigo de arriba falla en Firefox 9 debido al bug 696020.

### Especificacion

No es parte de ninguna especificacion.
GlobalEventHandlers.onscroll
============================

Un manejador de eventos para desplazamiento en `element`.

Sintaxis
--------


```js
element.onscroll = functionReference;
```

### Parámetros

`functionReference` es una referencia a una función para ser ejecutada cuando `element` es desplazado (enrollado).

Example
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
 #container {
 position: absolute;
 height: auto;
 top: 0;
 bottom: 0;
 width: auto;
 left: 0;
 right: 0;
 overflow: auto;
 }

 #foo {
 height: 1000px;
 width: 1000px;
 background-color: #777;
 display: block;
 }
 </style>
  </head>
  <body>
    <div id="container">
      <div id="foo"></div>
    </div>

    <script type="text/javascript">
 document.getElementById("container").onscroll = function () {
 console.log("scrolling");
 };
 </script>
  </body>
</html>
```

Notas
-----

El evento es generado cuando el usuario realiza desplazamiento (scrolls) sobre el contenido de un elemento. `Element.onscroll` es equivalente a `element.addEventListener("scroll" ... )`.

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.setCapture()
====================

Llame a este método durante el manejo de un evento mousedown para redirigir todos los eventos de mouse a este elemento hasta que se suelte el botón del mouse o se llame `document.releaseCapture ()`.

Sintaxis
--------
```

element.setCapture(retargetToElement);
```


`retargetToElement`

Si es verdadero, todos los eventos se dirigen directamente a este elemento; Si es falso, los eventos también pueden descargar a los descendientes de este elemento.

Ejemplo
-------

En este ejemplo, las coordenadas actuales del mouse se dibujan mientras situas el mouse alrededor después de hacer clic y mantener pulsado un elemento.


```html
<html>
  <head>
    <title>Mouse Capture Example</title>
    <style type="text/css">
 #myButton {
 border: solid black 1px;
 color: black;
 padding: 2px;
 -moz-box-shadow: black 2px 2px;
 }
 </style>

    <script type="text/javascript">
 function init() {
 var btn = document.getElementById("myButton");
 btn.addEventListener("mousedown", mouseDown, false);
 btn.addEventListener("mouseup", mouseUp, false);
 }

 function mouseDown(e) {
 e.target.setCapture();
 e.target.addEventListener("mousemove", mouseMoved, false);
 }

 function mouseUp(e) {
 e.target.removeEventListener("mousemove", mouseMoved, false);
 }

 function mouseMoved(e) {
 var output = document.getElementById("output");
 output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
 }
 </script>
  </head>
  <body onload="init()">
    <p>
      This is an example of how to use mouse capture on elements in Gecko 2.0.
    </p>
    <p><a id="myButton" href="#">Test Me</a></p>
    <div id="output">No events yet</div>
  </body>
</html>
```


Ver ejemplo en vivo

Notas
-----

El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.

Especificaciones
----------------

Ninguna.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `document.releaseCapture()` (en-US)
Element.computedStyleMap()
==========================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

El método `computedStyleMap()` de la interfaz `Element` devuelve una interfaz `StylePropertyMapReadOnly` (en-US) que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a `CSSStyleDeclaration`.

Sintaxis
--------


```js
var stylePropertyMapReadOnly = Element.computedStyleMap();
```

### Parámetros

Ninguno.

### Valor de resultado

Una interfaz `StylePropertyMapReadOnly` (en-US).

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
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>
```


Añadimos un poco de CSS


```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().`


```js
// 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.

¿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
----------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-element-computedstylemap |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.getAttribute()
======================

Resumen
-------

`getAttribute()` devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto `null` como `""` (una cadena vacía); ver Notes para más detalles.

Sintaxis
--------


```js
var atributo = element.getAttribute(nombreAtributo);
```


donde

* `atributo` es una cadena que contiene el valor del atributo `nombreAtributo`.
* `nombreAtributo` es el nombre del atributo del cual se quiere obtener el valor.
Ejemplo
-------


```js
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 `null` cuando 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 `element.hasAttribute()` para verificar la existencia de un atributo previo a la utilización de `getAttribute()` si es posible que el atributo requerido no exista en el elemento especificado.

Métodos DOM que tratan con atributos de elementos:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

Especificaciones
----------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getattribute① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.requestFullscreen()
===========================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Asynchronously requests that the element be made full-screen.

Sintaxis
--------


```js
element.mozRequestFullScreen();
```

Notas
-----

No esta garantizado que el elemento se cambie a modo pantalla completa. Si la autorización para entrar a modo pantalla completa es permitida, el documento obtendrá un evento "mozfullscreenchange" para hacerle saber que esta en modo pantalla completa en ese momento. Si la autorización es denegada, el documento obtiene un evento "mozfullscreenerror".

Ve a Using full-screen mode (en-US) para mas detalles y ejemplos.

Especificaciones
----------------

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Using full-screen mode (en-US)
* `document.mozCancelFullScreen()` (en-US)
* `document.mozFullScreen` (en-US)
* `document.mozFullScreenElement` (en-US)
* `document.mozFullScreenEnabled` (en-US)
* `:-moz-full-screen` (en-US)
* `allowfullscreen`
Element.scrollTopMax
====================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

La propiedad de solo lectura(read-only) `Element.scrollTopMax` retorna un `Number` que representa el máximo offset posible para el elemento.

Sintaxis
--------


```js
var pxl = elt.scrollTopMax;
```

Especificaciones
----------------

Esta propiedad no es parte de ninguna especificación.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `Element.scrollLeftMax` (en-US) dada la misma información para otros ejes.