@laserware/dominator
    Preparing search index...

    Function getStyles

    • Builds an object with the keys equal to the specified keys and the value equal to the corresponding style property value in the specified target. If the value is found, it is coerced to a boolean if "true" or "false", a number if numeric, or the string value if a string. If not found, the value is excluded from the return value.

      Important

      You will need to perform checks for whether a value is undefined in the returned object if some entries weren't present. See the code block below for additional details.

      // Assuming you pass this in as the generic:
      type ShapeIn = {
        display: string;
        lineHeight: number;
      };

      // The return type of this function is:
      type ShapeOut = {
        display: string | undefined;
        lineHeight: number | undefined;
      };

      Type Parameters

      Parameters

      • target: null | Target

        Element, EventTarget, or CSS selector.

      • keys: KeysOf<V>

        Names of the style properties to get values for.

      Returns WithUndefinedValues<V>

      Object with specified names as keys and corresponding style property values (or undefined if not present).

      The arcade!WithUndefinedValues type represents an object with values that could be undefined.

      elements!InvalidElementError if the target could not be found or doesn't have a style property.

      HTML

      <div
        id="example"
        style="display: flex; line-height: 1.5;"
      >...</div>

      Code

      type Shape = {
        display: string | undefined;
        lineHeight: number | undefined;
        fontSize: number | undefined;
      };

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

      getStyles<Shape>(element, [
        "display",
        "lineHeight",
        "fontSize",
      ]);
      // { display: "flex", lineHeight: 1.5, fontSize: undefined }

    Settings

    Member Visibility