Class SetAttribute

Either sets or deletes an attribute, or toggles between two values of an attribute, on the given element.

IMPORTANT: When constructed, it sets all given attributes on the element to their OFF (undone) state as a form of initialization.

To use with auto-widgets (HTML API) as part of a trigger specification:

  • Action name: "set-attribute".
  • Arguments (required): name of attribute
  • Options (at least one required):
    • on: A string value for the attribute. Can be blank. Omit this option in order to have the attribute deleted when the action is done.
    • off: A string value for the attribute. Can be blank. Omit this option in order to have the attribute deleted when the action is undone.

Note that with the HTML API you can only specify one attribute per action. But of course you can add the same action multiple times per trigger. See examples below.

Example

This is an overview of the various combinations that you can use to set an attribute to a non-empty value, a blank value or delete the attribute when the action is either done or undone:

Specification Value when done Value when undone
@set-attr: attr, on=onVal, off=offVal "onVal" "offVal"
@set-attr: attr, on=value "value" deleted
@set-attr: attr, off=value deleted "value"
@set-attr: attr, on= "" deleted
@set-attr: attr, off= deleted ""
@set-attr: attr, on=value, off= "value" ""
@set-attr: attr, on= , off=value "" "value"

Example

This will set attribute attrA to valueA-ON and attrB to valueB-ON when the element enters the viewport and set attrA to valueA-OFF and attrB to valueB-OFF when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attrA, on=valueA-ON, off=valueA-OFF
                        @set-attribute: attrB, on=valueB-ON, off=valueB-OFF"
></div>

Example

This will set attribute attr to value when the element enters the viewport and delete the attribute when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, on=value"></div>

Example

This will delete attribute attr when the element enters the viewport and set it to value when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, off=value"></div>

Example

This will set attribute attr to a blank value when the element enters the viewport and delete the attribute when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, on="></div>

Example

This will delete attribute attr when the element enters the viewport and set it to a blank value when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, off="></div>

Example

This will set attribute attr to value when the element enters the viewport and set it to a blank value when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, on=value, off="></div>

Example

This will set attribute attr to a blank value when the element enters the viewport and set it to value when it leaves the viewport.

<div data-lisn-on-view="@set-attribute: attr, on=, off=value"></div>

Implements

Methods

register

Constructors

constructor

Properties

do toggle undo

Methods

Staticregister

Constructors

constructor

Properties

Readonlydo

do: () => Promise<void>

Sets the attribute to its "ON" value, or deletes it if that value is null.

Readonlytoggle

toggle: () => Promise<void>

Toggles the attribute from its "ON" to "OFF" value or vice versa.

Readonlyundo

undo: () => Promise<void>

Sets the attribute to its "OFF" value, or deletes it if that value is null.

Settings

Member Visibility

On This Page

Methods
Constructors
Properties