Function setDatasetEntry

  • setDatasetEntry<TN extends TagName = "*">(
        target: null | Target<TN>,
        key: string,
        value: null | DatasetValue,
    ): ElementOf<TN>

  • Assigns the value to the dataset attribute/property name key in the target.

    Type Parameters

    • TN extends TagName = "*"

      Tag name of the Element representation of target.

    Parameters

    • target: null | Target<TN>

      Element, EventTarget, or CSS selector.

    • key: string

      Key or property name for the dataset entry.

    • value: null | DatasetValue

      Value to set for associated property or attribute name.

    Returns ElementOf<TN>

    Element representation of the specified target.

    Throws

    elements!InvalidElementError if the specified target wasn't found.

    Example

    HTML (Before)

    <div
      id="example"
      data-is-active="false"
      data-count="30"
      data-label="Example"
    >
      ...
    </div>

    Using Attribute Name (data-*)

    const element = findElement("#example")!;

    setDatasetEntry(element, "data-is-active", true);
    setDatasetEntry(element, "data-count", 50);
    setDatasetEntry(element, "data-label", "Update");

    Using Property Name (camelCase)

    const element = findElement("#example")!;

    setDatasetEntry(element, "isActive", true);
    setDatasetEntry(element, "count", 50);
    setDatasetEntry(element, "label", "Update");

    HTML (After)

    <div
      id="example"
      data-is-active="true"
      data-count="50"
      data-label="Update"
    >
      ...
    </div>

Settings

Member Visibility