recursal/MDN huggingface dataset:
StylePropertyMapReadOnly: forEach() method
==========================================

 The **`StylePropertyMapReadOnly.forEach()`** method executes a
 provided function once for each element of `StylePropertyMapReadOnly`.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

The function to execute for each element, taking three arguments:

`currentValue`

The value of the current element being processed.

`index` Optional

The index of the current element being processed.

`array` Optional

The StylePropertyMapReadOnly that `forEach()` is being called on.


`thisArg` Optional

 Value to use as **`this`** (i.e., the reference
 `Object`) when executing `callback`.


### Return value

None (`undefined`).

Examples
--------

 Here is an example of using `forEach()` on a retrieved
 `Element.computedStyleMap()`.


```js
// get a button element
const buttonEl = document.querySelector(".example");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// forEach will allow us to run code over each prop/val pair
allComputedStyles.forEach((elem, index, arr) => {
  // code to run for each pair
});
```

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

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.forEach`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: entries() method
==========================================

 The **`StylePropertyMapReadOnly.entries()`** method returns an
 array of a given object's own enumerable property `[key, value]` pairs, in
 the same order as that provided by a `for...in` loop
 (the difference being that a for-in loop enumerates properties in the prototype chain as
 well).

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

 An array of the given `StylePropertyMapReadOnly` object's own enumerable
 property `[key, value]` pairs.

Examples
--------

 Here shows an example of using `StylePropertyMapReadOnly.entries()` method
 on an elements computed styles.


```js
// grab a DOM element
const buttonEl = document.querySelector("button");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// entries returns an iterable of the items
const iterableStyles = allComputedStyles.entries();

// returns a two item array with align-content as the first item and CSSStyleValue as the second
console.log(iterableStyles.next().value);
```

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

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.entries`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: keys() method
=======================================

 The **`StylePropertyMapReadOnly.keys()`** method returns a new
 *array iterator* containing the keys for each item
 in `StylePropertyMapReadOnly`

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

A new `Array`.

Examples
--------

 In this example we use the `keys()` method to be able to access the
 properties within our `Element.computedStyleMap()`.


```js
// get a button element
const buttonEl = document.querySelector("button");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// keys returns an iterable list of properties
const props = allComputedStyles.keys();
console.log(props.next().value); // returns align-content
```

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

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: size property
=======================================

 The **`size`** read-only property of the
 `StylePropertyMapReadOnly` interface returns an unsigned long integer
 containing the size of the `StylePropertyMapReadOnly` object.

Value
-----

An unsigned long integer.

Examples
--------

 Here we use the size property to return the total entries within the button elements
 `computedStyleMap`.


```js
// grab our element
const buttonEl = document.querySelector("button");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// use size to get the total styles within the map
const amountStyles = allComputedStyles.size;
console.log(amountStyles); // logs 338
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-size |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: get() method
======================================

 The **`get()`** method of the
 `StylePropertyMapReadOnly` interface returns a `CSSStyleValue`
 object for the first value of the specified property.

Syntax
------


```js
get(property)
```

### Parameters

`property`

The name of the property to retrieve the value of.

### Return value

A `CSSStyleValue` object.

Examples
--------

 Let's get just a few properties and values. Let's start by creating a link inside a
 paragraph in our HTML, and adding a definition list which we will populate with
 JavaScript:


```html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="results"></dl>
```


We add a bit of CSS, including a custom property and an inheritable property:


```css
p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}
```


 We use the Element's
 `computedStyleMap()`
 to return a *StylePropertyMapReadOnly* object. We create an array of properties
 of interest and use the StylePropertyMapReadOnly's `get()` method to get only
 those values.


```js
// get the element
const myElement = document.querySelector("a");

// Retrieve all computed styles with computedStyleMap()
const styleMap = myElement.computedStyleMap();

// get the <dl> we'll be populating
const stylesList = document.querySelector("#results");

// array of properties we're interested in
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// iterate over our properties of interest
for (const property of ofInterest) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = property;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(property);
  stylesList.appendChild(cssValue);
}
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-get |

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

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

See also
--------

* CSS Typed Object Model API
* Learning Houdini: the CSS Typed Object Model
StylePropertyMapReadOnly: has() method
======================================

 The **`has()`** method of the
 `StylePropertyMapReadOnly` interface indicates whether the specified
 property is in the `StylePropertyMapReadOnly` object.

Syntax
------


```js
has(property)
```

### Parameters

`property`

The name of a property.

### Return value

A boolean value.

Examples
--------

 Here we use the `has()` method to see if the padding-top property is present
 within the button elements style attribute.


```js
// get the button element
const buttonEl = document.querySelector(".example");

// find what's in the style attribute with attributeStyleMap and has()
const hasPadTop = buttonEl.attributeStyleMap.has("padding-top");

console.log(hasPadTop); // logs true if padding-top is present in style attribute
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-has |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: values() method
=========================================

 The **`StylePropertyMapReadOnly.values()`** method returns a
 new *array iterator* containing the values for each index in the
 `StylePropertyMapReadOnly` object.

Syntax
------


```js
values()
```

### Parameters

None.

### Return value

A new `Array`.

Examples
--------

 In this example we use the `values()` method to be able to access the values
 within our `Element.computedStyleMap()`.


```js
// get a button element
const buttonEl = document.querySelector("button");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// values returns an iterable list of the CSS values
const vals = allComputedStyles.values();
console.log(vals.next().value); // returns a CSSStyleValue
```

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

#### No specification found

No specification data found for `api.StylePropertyMapReadOnly.values`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StylePropertyMapReadOnly: getAll() method
=========================================

 The **`getAll()`** method of the
 `StylePropertyMapReadOnly` interface returns an array of
 `CSSStyleValue` objects containing the values for the provided property.

Syntax
------


```js
getAll(property)
```

### Parameters

`property`

The name of the property to retrieve all values of.

### Return value

An array of `CSSStyleValue` objects.

Examples
--------

 The following example uses `getAll()` with the
 `background-image` property. An `Array` is returned which
 contains an item for each background image declared.


```js
// get a button element
const buttonEl = document.querySelector("button");

// we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// use getAll() with the background image property
const allBkImages = allComputedStyles.getAll("background-image");
console.log(allBkImages); // logs an array with each background image as an item
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymapreadonly-getall |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WheelEvent: deltaZ property
===========================

 The **`WheelEvent.deltaZ`** read-only property is a
 `double` representing the scroll amount along the z-axis, in the
 `WheelEvent.deltaMode` unit.

Value
-----

A number.

Examples
--------


```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaZ: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaZ);
```

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

| Specification |
| --- |
| UI Events # dom-wheelevent-deltaz |

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

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

See also
--------

* `wheel`
* `WheelEvent`
WheelEvent: deltaY property
===========================

 The **`WheelEvent.deltaY`** read-only property is a
 `double` representing the vertical scroll amount in the
 `WheelEvent.deltaMode` unit.

Value
-----

A number.

Examples
--------


```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaY: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaY);
```

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

| Specification |
| --- |
| UI Events # dom-wheelevent-deltay |

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

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

See also
--------

* `wheel`
* `WheelEvent`
WheelEvent: deltaX property
===========================

 The **`WheelEvent.deltaX`** read-only property is a
 `double` representing the horizontal scroll amount in the
 `WheelEvent.deltaMode` unit.

Value
-----

A number.

Examples
--------


```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaX);
```

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

| Specification |
| --- |
| UI Events # dom-wheelevent-deltax |

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

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

See also
--------

* `wheel`
* `WheelEvent`
WheelEvent: WheelEvent() constructor
====================================

The **`WheelEvent()`** constructor returns a new `WheelEvent` object.

**Note:** If you construct a synthetic event using this constructor, that event will not be *trusted*, for security reasons.
 Only browser-generated `WheelEvent` objects are trusted and only trusted events trigger default actions.


Syntax
------


```js
new WheelEvent(type)
new WheelEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `wheel`.


`options` Optional

An object that, *in addition of the properties defined in `MouseEvent()`*, can have the following properties:

`deltaX` Optional

 A floating number representing the horizontal scroll amount in the `deltaMode` unit.
 It defaults to `0.0`.


`deltaY` Optional

 A floating number representing the vertical scroll amount in the `deltaMode` unit.
 It defaults to `0.0`.


`deltaZ` Optional

 A floating number representing the scroll amount for the z-axis scroll amount in the `deltaMode` unit.
 It defaults to `0.0`.


`deltaMode` Optional

An integer representing the unit of the delta values scroll amount. It defaults to `0x00`. Permitted values are:

| Constant | Value | Description |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | The delta values are specified in pixels. |
| `DOM_DELTA_LINE` | `0x01` | The delta values are specified in lines. |
| `DOM_DELTA_PAGE` | `0x02` | The delta values are specified in pages. |


### Return value

A new `WheelEvent` object.

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

| Specification |
| --- |
| UI Events # dom-wheelevent-wheelevent |

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

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

See also
--------

* The `WheelEvent` interface it belongs to.
WheelEvent: deltaMode property
==============================

 The **`WheelEvent.deltaMode`** read-only property returns an
 `unsigned long` representing the unit of the delta values scroll amount.
 Permitted values are:


| Constant | Value | Description |
| --- | --- | --- |
| `DOM_DELTA_PIXEL` | `0x00` | The delta values are specified in pixels. |
| `DOM_DELTA_LINE` | `0x01` | The delta values are specified in lines. |
| `DOM_DELTA_PAGE` | `0x02` | The delta values are specified in pages. |

Value
-----

An `unsigned long`.

Examples
--------


```js
const syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaX: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaMode);
```

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

| Specification |
| --- |
| UI Events # dom-wheelevent-deltamode |

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

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

See also
--------

* `wheel`
* `WheelEvent`
PerformanceEventTiming: processingEnd property
==============================================

The read-only **`processingEnd`** property returns the time the last event handler finished executing.

It's equal to `PerformanceEventTiming.processingStart` when there are no such event handlers.

Value
-----

A `DOMHighResTimeStamp` timestamp.

Examples
--------

### Using the processingEnd property

The `processingEnd` property can be used when observing event-timing entries (`PerformanceEventTiming`). For example, to calculate input delay or event processing times.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Full duration
    const duration = entry.duration;
    // Input delay (before processing event)
    const delay = entry.processingStart - entry.startTime;
    // Synchronous event processing time
    // (between start and end dispatch)
    const time = entry.processingEnd - entry.processingStart;
  });
});
// Register the observer for events
observer.observe({ type: "event", buffered: true });
```

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

| Specification |
| --- |
| Event Timing API # dom-performanceeventtiming-processingend |

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

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

See also
--------

* `PerformanceEventTiming.processingStart`
PerformanceEventTiming: target property
=======================================

The read-only **`target`** property returns the associated event's last `target` which is the node onto which the event was last dispatched.

Value
-----

A `Node` onto which the event was last dispatched.

Or `null` if the `Node` is disconnected from the document's DOM or is in the shadow DOM.

Examples
--------

### Observing events with a specific last target

The `target` property can be used when observing event-timing entries (`PerformanceEventTiming`). For example, to log and measure events for a given last target only.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.target && entry.target.id === "myNode") {
      const delay = entry.processingStart - entry.startTime;
      console.log(entry.name, delay);
    }
  });
});

// Register the observer for events
observer.observe({ type: "event", buffered: true });
```

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

| Specification |
| --- |
| Event Timing API # dom-performanceeventtiming-target |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceEventTiming: toJSON() method
=======================================

The **`toJSON()`** method of the `PerformanceEventTiming` interface is a serializer; it returns a JSON representation of the `PerformanceEventTiming` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PerformanceEventTiming` object.

The JSON doesn't contain the `target` property because it is of type `Node`, which doesn't provide a `toJSON()` operation.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `PerformanceEventTiming` object.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "event", buffered: true });
```


This would log a JSON object like so:


```json
{
  "name": "dragover",
  "entryType": "event",
  "startTime": 67090751.599999905,
  "duration": 128,
  "processingStart": 67090751.70000005,
  "processingEnd": 67090751.900000095,
  "cancelable": true
}
```


To get a JSON string, you can use `JSON.stringify(entry)` directly; it will call `toJSON()` automatically.

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

| Specification |
| --- |
| Event Timing API # dom-performanceeventtiming-tojson |

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

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

See also
--------

* `JSON`
PerformanceEventTiming: processingStart property
================================================

The read-only **`processingStart`** property returns the time at which event dispatch started. This is when event handlers are about to be executed.

Value
-----

A `DOMHighResTimeStamp` timestamp.

Examples
--------

### Using the processingStart property

The `processingStart` property can be used when observing event timing entries (`PerformanceEventTiming`). For example, to calculate input delay or event processing times.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Full duration
    const duration = entry.duration;
    // Input delay (before processing event)
    const delay = entry.processingStart - entry.startTime;
    // Synchronous event processing time
    // (between start and end dispatch)
    const time = entry.processingEnd - entry.processingStart;
  });
});
// Register the observer for events
observer.observe({ type: "event", buffered: true });
```

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

| Specification |
| --- |
| Event Timing API # dom-performanceeventtiming-processingstart |

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

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

See also
--------

* `PerformanceEventTiming.processingEnd`
PerformanceEventTiming: interactionId property
==============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The read-only **`interactionId`** property returns an ID that uniquely identifies a user interaction which triggered a series of associated events.

Description
-----------

When a user interacts with a web page, a user interaction (for example a click) usually triggers a sequence of events, such as `pointerdown`, `pointerup`, and `click` events. To measure the latency of this series of events, the events share the same `interactionId`.

An `interactionId` is only computed for the following event types belonging to a user interaction. It is `0` otherwise.

| Event types | User interaction |
| --- | --- |
| `pointerdown`, `pointerup`, `click` | click / tap / drag |
| `keydown`, `keyup` | key press |

Value
-----

A number.

Examples
--------

### Using interactionId

The following example collects event duration for all events corresponding to an interaction. The `eventLatencies` map can then be used to find events with maximum duration for a user interaction, for example.


```js
// The key is the interaction ID.
let eventLatencies = {};

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.interactionId > 0) {
      const interactionId = entry.interactionId;
      if (!eventLatencies.has(interactionId)) {
        eventLatencies[interactionId] = [];
      }
      eventLatencies[interactionId].push(entry.duration);
    }
  });
});

observer.observe({ type: "event", buffered: true });

// Log events with maximum event duration for a user interaction
Object.entries(eventLatencies).forEach(([k, v]) => {
  console.log(Math.max(...v));
});
```

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

| Specification |
| --- |
| Event Timing API # dom-performanceeventtiming-interactionid |

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

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