Set Element Attribute Style

Change attributes and CSS styles of elements on the active tab: hide, recolor, resize, enable, set a value.

What it does

Set Element Attribute Style applies your changes to every element that matches DOM Selector on the active tab.

• Attributes: each entry sets Name to Value, or deletes the attribute when Remove is on. An empty Value sets the attribute with no value, which is how on/off attributes such as disabled or hidden work.
• Setting value also changes what a form field contains, and setting checked to true ticks a checkbox (any other value unticks it). The page is told the field changed, as if you had edited it.
• Styles: each entry sets a CSS property (such as display, background-color, font-size) to a Value (such as none, #fff3cd, 18px).

Changes are only on your screen: reloading the page undoes them.

When to use it

• Hide distractions without deleting them: display = none.
• Mark items a workflow found, for example a yellow background on matching rows.
• Re-enable a disabled button, or open a collapsed section, by removing an attribute.
• For a temporary highlight that fades, use Highlight Elements. To fill forms, Form Fill is simpler.

Inputs and settings

Setting	Type	What it does
DOM Selector REQ(required)	Page element	The selector of the DOM element to interact with.
Attributes	List of entries
Attributes (each entry) › Name REQ(required)	Text
Attributes (each entry) › Value	Text
Attributes (each entry) › Remove	Toggle	Default: Off
Styles	List of entries
Styles (each entry) › CSS property REQ(required)	Text
Styles (each entry) › Value REQ(required)	Text

• DOM Selector: click the crosshair button and click an element, or type a CSS selector. A selector such as .sponsored changes all matching elements.
• CSS property uses the CSS name with dashes: background-color, not backgroundColor.

Outputs

• Output

Each output item has these fields:

Field	Type	What it holds
result	Object

Shape of an output item

{
  "result": {}
}

The incoming item passes through with a result field added: matched (how many elements the selector found), updated (how many were changed) and, for an invalid selector, error.

Dependencies and credentials

None. This node needs no connection and has no slots for other nodes.

Example workflow

1. A Page Load trigger with URL Patterns = https://shop.example.com/*.
2. Set Element Attribute Style with DOM Selector = .sponsored, and one Styles entry: CSS property display, Value none.
3. A second Set Element Attribute Style with DOM Selector = .price and Styles: font-weight = bold, background-color = #fff3cd.

Common issues

• matched is 0. The selector found nothing when the node ran. Check it with Ping, or add Wait For Element first.
• error says the selector is not valid. DOM Selector has a typo or uses an unsupported form. Pick the element again with the crosshair.
• The style does not change anything. Check that the value is valid CSS for that property: an invalid value is ignored, and so is a value ending in !important. If the site still overrides it, hide or remove the element with Delete UI Elements.
• The node fails outside the extension. This node runs in the browser extension; install it or run the workflow from the extension.

Related nodes

• Delete UI Elements: remove elements entirely.
• Highlight Elements: a temporary highlight.
• Get Element Data: read an element’s attributes before changing them.