---
title: Set Element Attribute Style
description: Set attributes and styles on selected elements in the opened page
---

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](/nodes/extension/ui/highlight-elements/). To fill forms, [Form Fill](/nodes/extension/ui/form-fill/) is simpler.

## Inputs and settings

* **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

Each output item has these fields:

```json title="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](/nodes/builtin/trigger/pageload/) 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](/nodes/extension/ui/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](/nodes/extension/ui/delete-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](/nodes/extension/ui/delete-elements/): remove elements entirely.
* [Highlight Elements](/nodes/extension/ui/highlight-elements/): a temporary highlight.
* [Get Element Data](/nodes/extension/getelementdata/): read an element's attributes before changing them.