recursal/MDN huggingface dataset:
CSSStyleDeclaration: getPropertyCSSValue() method
=================================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **CSSStyleDeclaration.getPropertyCSSValue()**
 method interface returns a `CSSValue` containing the CSS value for a
 property. Note that it returns `null` if the property name is a
 shorthand property.


**Note:** This interface was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* `CSSStyleDeclaration.getPropertyValue()` of the untyped CSS Object Model, widely supported, or
* `Element.computedStyleMap()` of the modern CSS Typed Object Model API, less supported and considered experimental.

Syntax
------


```js
getPropertyCSSValue(property)
```

### Parameters

`property`

A string representing the property name to be retrieved.

### Return value

A `CSSValue` containing the CSS value for a property. If none exists, returns `null`.

Examples
--------

 The following JavaScript code gets an object containing the computed RGB values of
 the `color` CSS property:


```js
const style = window.getComputedStyle(elem, null);
const rgbObj = style.getPropertyCSSValue("color").getRGBColorValue();
```

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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

 The **CSSStyleDeclaration.getPropertyPriority()** method interface returns
 a string that provides all explicitly set priorities on the CSS
 property.

Syntax
------


```js
getPropertyPriority(property)
```

### Parameters

`property`

A string representing the property name to be checked.

### Return value

 A string that represents the priority (e.g. `"important"`) if one exists.
 If none exists, returns the empty string.

Examples
--------

 The following JavaScript code checks whether `margin` is marked as important
 in a CSS selector rule:


```js
const declaration = document.styleSheets[0].cssRules[0].style;
const isImportant = declaration.getPropertyPriority("margin") === "important";
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-cssstyledeclaration-getpropertypriority |

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

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

 The **`HTMLMeterElement.labels`** read-only property returns a
 `NodeList` of the `<label>` elements associated with the
 `<meter>` element.

Value
-----

 A `NodeList` containing the `<label>` elements associated
 with the `<meter>` element.

Examples
--------

### HTML


```html
<label id="label1" for="test">Label 1</label>
<meter id="test" min="0" max="100" value="70">70</meter>
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const meter = document.getElementById("test");
  for (const label of meter.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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

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

 The **`label`** read-only property of the
 `GPUCommandBuffer` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUCommandEncoder.finish()` call, or you can get and set it directly on the `GPUCommandBuffer` object.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPUCommandBuffer.label`:


```js
const commandBuffer = commandEncoder.finish();
commandBuffer.label = "mycommandbuffer";
console.log(commandBuffer.label); // "mycommandbuffer";
```


Setting a label via the originating `GPUCommandEncoder.finish()` call, and then getting it via `GPUCommandBuffer.label`:


```js
const commandBuffer = commandEncoder.finish({
  label: "mycommandbuffer",
});

console.log(commandBuffer.label); // "mycommandbuffer";
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
IDBDatabase: versionchange event
================================

 The `versionchange` event is fired when a database structure change (`upgradeneeded` event send on an `IDBOpenDBRequest` or `IDBFactory.deleteDatabase`) was requested elsewhere (most probably in
 another window/tab on the same computer).

Syntax
------

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


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

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

A generic `Event`.

Examples
--------

This example opens a database and, on success, adds a listener to `versionchange`:


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.addEventListener("success", (event) => {
  const db = event.target.result;
  db.addEventListener("versionchange", (event) => {
    console.log("The version of this database has changed");
  });
});
```


The same example, using the `onversionchange` event handler property:


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("Nonexistent", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.onsuccess = (event) => {
  const db = event.target.result;
  db.onversionchange = (event) => {
    console.log("The version of this database has changed");
  };
};
```

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

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

See also
--------

* Using IndexedDB
IDBDatabase: close() method
===========================

 The **`close()`** method of the `IDBDatabase`
 interface returns immediately and closes the connection in a separate thread.

 The connection is not actually closed until all transactions created using this
 connection are complete. No new transactions can be created for this connection once
 this method is called. Methods that create transactions throw an exception if a closing
 operation is pending.

**Note:** This feature is available in Web Workers

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4); // opening a database.

// Create event handlers for both success and failure of
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable.
  db = DBOpenRequest.result;

  // now let's close the database again!
  db.close();
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-close② |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBDatabase: close event
========================

The `close` event is fired on `IDBDatabase` when the database connection is unexpectedly closed. This could happen, for example, if the underlying storage is removed or if the user clears the database in the browser's history preferences.

Note that it is not fired if the database connection is closed normally using `IDBDatabase.close()`.

Syntax
------

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


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

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

A generic `Event`.

Examples
--------

This example opens a database and listens for the `close` event:


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.onsuccess = (event) => {
  const db = dBOpenRequest.result;
  db.addEventListener("close", () => {
    console.log("Database connection closed");
  });
};
```


The same example, using the `onclose` property instead of `addEventListener()`:


```js
// Open the database
const dBOpenRequest = window.indexedDB.open("toDoList", 4);

dBOpenRequest.onupgradeneeded = (event) => {
  const db = event.target.result;

  // Create an objectStore for this database
  const objectStore = db.createObjectStore("toDoList", {
    keyPath: "taskTitle",
  });

  // define what data items the objectStore will contain
  objectStore.createIndex("hours", "hours", { unique: false });
  objectStore.createIndex("minutes", "minutes", { unique: false });
  objectStore.createIndex("day", "day", { unique: false });
  objectStore.createIndex("month", "month", { unique: false });
  objectStore.createIndex("year", "year", { unique: false });
};

dBOpenRequest.onsuccess = (event) => {
  const db = dBOpenRequest.result;
  db.onclose = () => {
    console.log("Database connection closed");
  };
};
```

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

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

See also
--------

* Using IndexedDB
IDBDatabase: deleteObjectStore() method
=======================================

 The **`deleteObjectStore()`** method of the
 `IDBDatabase` interface destroys the object store with the given name in
 the connected database, along with any indexes that reference it.

 As with `IDBDatabase.createObjectStore`, this method can be called
 *only* within a `versionchange`
 transaction.

**Note:** This feature is available in Web Workers

Syntax
------


```js
deleteObjectStore(name)
```

### Parameters

`name`

 The name of the object store you want to delete. Names are
 case sensitive.


### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the method was not called from a `versionchange` transaction callback.

`TransactionInactiveError` `DOMException`

Thrown if a request is made on a source database that doesn't exist (E.g. has been deleted or removed.)

`NotFoundError` `DOMException`

Thrown when trying to delete an object store that does not exist.

Examples
--------


```js
const dbName = "sampleDB";
const dbVersion = 2;
const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = (event) => {
  const db = request.result;
  if (event.oldVersion < 1) {
    db.createObjectStore("store1");
  }

  if (event.oldVersion < 2) {
    db.deleteObjectStore("store1");
    db.createObjectStore("store2");
  }

  // etc. for version < 3, 4…
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-deleteobjectstore① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBDatabase: version property
=============================

 The **`version`** property of the `IDBDatabase`
 interface is a 64-bit integer
 that contains the version of the connected database.
 When a database is first created, this attribute is an empty string.

**Note:** This feature is available in Web Workers

Value
-----

An integer containing the version of the connected database.

Examples
--------


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database
// being opened successfully, or not
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable. This is used a lot below
  db = DBOpenRequest.result;

  // This line will log the version of the connected database, which should be "4"
  console.log(db.version);
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-version① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBDatabase: objectStoreNames property
======================================

 The **`objectStoreNames`** read-only property of the
 `IDBDatabase` interface is a `DOMStringList` containing a
 list of the names of the object stores currently in the connected database.

**Note:** This feature is available in Web Workers

Value
-----

 A `DOMStringList` containing a list of
 the names of the object stores currently
 in the connected database.

Examples
--------


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable. This is used a lot below
  db = DBOpenRequest.result;

  // This line will log the names of the object stores of the connected database, which should be
  // an object that looks like { ['my-store-name'] }
  console.log(db.objectStoreNames);
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-objectstorenames① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBDatabase: name property
==========================

 The **`name`** read-only property of the
 `IDBDatabase` interface is a string that contains the
 name of the connected database.

**Note:** This feature is available in Web Workers

Value
-----

A string containing the name of the connected database.

Examples
--------

 This example shows a database connection being opened, the resulting
 `IDBDatabase` object being stored in a db variable, and the name property
 then being logged. For a full example, see our
 To-do Notifications
 app (view example live).


```js
// Let us open our database
const DBOpenRequest = window.indexedDB.open("toDoList", 4);

// these two event handlers act on the database being
// opened successfully, or not
DBOpenRequest.onerror = (event) => {
  note.innerHTML += "<li>Error loading database.</li>";
};

DBOpenRequest.onsuccess = (event) => {
  note.innerHTML += "<li>Database initialized.</li>";

  // store the result of opening the database in the db variable. This is used a lot below
  db = DBOpenRequest.result;

  // This line will log the name of the database, which should be "toDoList"
  console.log(db.name);
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbdatabase-name① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
WEBGL\_compressed\_texture\_astc: getSupportedProfiles() method
===============================================================

 The **`WEBGL_compressed_texture_astc.getSupportedProfiles()`**
 method returns an array of strings containing the names of the ASTC profiles supported
 by the implementation.

Syntax
------


```js
getSupportedProfiles()
```

### Parameters

None.

### Return value

 An `Array` of string elements indicating which ASTC
 profiles are supported by the implementation. Currently, this can be:

* "ldr": Low Dynamic Range.
* "hdr": High Dynamic Range.

 Dynamic range refers to ratio between the brightest and darkest parts of the scene. Low
 dynamic ranges are for example JPEG format images which won't exceed 255:1, or CRT
 monitors which won't exceed 100:1. An HDR image stores pixel values that span the whole
 tonal range of real-world scenes (100,000:1).

Examples
--------


```js
const ext = gl.getExtension("WEBGL\_compressed\_texture\_astc");
ext.getSupportedProfiles(); // ["ldr"]
```

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

| Specification |
| --- |
| WebGL WEBGL\_compressed\_texture\_astc Extension Specification  |

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

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

See also
--------

* `WEBGL_compressed_texture_astc`
DataTransferItemList: length property
=====================================

 The read-only **`length`** property of the
 `DataTransferItemList` interface returns the number of items currently in
 the drag item list.

Value
-----

 The number of drag data items in the list, or 0 if the list is empty or disabled. The
 drag item list is considered to be disabled if the item list's
 `DataTransfer` object is not associated with a drag data store.

Examples
--------

This example shows the use of the `length` property.

### JavaScript


```js
function dragstart\_handler(ev) {
  console.log("dragStart");
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
  // Add some other items to the drag payload
  dataList.add("<p>Paragraph…</p>", "text/html");
  dataList.add("http://www.example.org", "text/uri-list");
}

function drop\_handler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  // Loop through the dropped items and log their data
  for (let i = 0; i < data.length; i++) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      data[i].getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      data[i].getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragover\_handler(ev) {
  console.log("dragOver");
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragend\_handler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;
  // Clear any remaining drag data
  dataList.clear();
}
```

### HTML


```html
<div>
  <p
 id="source"
 ondragstart="dragstart\_handler(event);"
 ondragend="dragend\_handler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  Drop Zone
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-length-dev |

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

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