# Get Element Attribute

{% hint style="info" %}
**Block Information**

Available in: Page Flow

Toolbox Category: Html/DOM

Block Type: [Output](https://docs.zingy.ai/app-editor/block-anatomy#output-block)

Output Type: [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types)
{% endhint %}

**`Get Element Attribute`** is an [output block](https://docs.zingy.ai/app-editor/block-anatomy#output-block) that allows you to retrieve the value of any [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) in elements on a page or form. The output is of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) and is compatible with [Value Parameters](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) of type [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) or of type [*any*](https://docs.zingy.ai/app-editor/page-flow/references/value-types).

{% hint style="success" %}
Refer to the [Get Element Attribute in Data Design](https://docs.zingy.ai/app-editor/page-flow/toolbox-blocks/get-element-attribute-in-data-design) block for dynamically generated content.
{% endhint %}

The block comes in two modes which are discussed below.

## Mode 1 <a href="#mode-1" id="mode-1"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FTYx8gxIcUwm3umgbeuDU%2Fimage.png?alt=media&#x26;token=ea30e044-f3fa-4897-acd0-8b4176acb637" alt="" width="338"><figcaption><p>Get Element Attribute (Mode 1)</p></figcaption></figure></div>

The Mode 1 version of the Get Element Attribute block consists of (from left to right):

* *Attribute:* [Input](https://docs.zingy.ai/app-editor/block-anatomy#input) configuration setting to specify the [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) to retrieve the value of.
* *Element*: [Selectable Input](https://docs.zingy.ai/app-editor/block-anatomy#selectable-input) to choose the element you want to get the attribute of.

## Mode 2 <a href="#mode-2" id="mode-2"></a>

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FGRxehSpPopRDn2vSK6wf%2Fimage.png?alt=media&#x26;token=858deb41-0f53-43bc-8586-b2bc9f240c72" alt="" width="338"><figcaption><p>Get Element Attribute (Mode 2)</p></figcaption></figure></div>

The Mode 2 version of the Get Element Attribute block consists of (from left to right):

* *Attribute*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value representing the [HTML attribute](https://en.wikipedia.org/wiki/HTML_attribute) to set or change the value of.
* *Element*: [Value Parameter](https://docs.zingy.ai/app-editor/block-anatomy#value-parameters) that accepts either a [*text*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value in the form of a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) or an [*element*](https://docs.zingy.ai/app-editor/page-flow/references/value-types) value[.](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) The Element block comes pre-attached for your convenience but can be removed and customized.

***

## Usage Examples

The image below shows an example of the Mode 1 version where the variable a is set to the value of the [href](https://docs.zingy.ai/page-editor/built-in-elements/link#href) attribute of a [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FEViKOiq55BLlmvlRDv6w%2Fimage.png?alt=media&#x26;token=e2433301-1030-44a1-912a-7816c2031cd1" alt="" width="563"><figcaption><p>Example of Get Element Attribute Mode 1</p></figcaption></figure></div>

In the next example we see a Mode 2 version where the variable a is set to the value of the [href](https://docs.zingy.ai/page-editor/built-in-elements/link#href) attribute of the same [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link) element. This time the element is selected using a [CSS Selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors).

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F9Ywi21ojyHcvnmGujemN%2Fimage.png?alt=media&#x26;token=982200db-0832-495b-b154-25f54c8e2852" alt="" width="563"><figcaption><p>Example of Get Element Attribute Mode 2</p></figcaption></figure></div>