> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/manipulation/.attr.md).

# .attr()

There are two usage of **J**scula attr() method.

1. **To return attribute value**: This method returns the value of the first matched element.
2. **To set attribute value**: This method is used to set one or more attribute/value pairs of the set of matched elements.

**Syntax**:

To return an attribute's value:

```
$(selector).attr(attribute)
```

Example:

```javascript
 $("button").click(function(){  
    $("img").attr("src"); 
 });
```

To set an attribute and value:

```
$(selector).attr(attribute,value) 
```

Example:

```javascript
 $("button").click(function(){  
    $("img").attr("width", "500");  
 });
```

To set an attribute and value by using a function:

```
$(selector).attr(attribute,function(currentvalue)) 
```

Example:

```javascript
$("button").click(function(){
  $("#mylink").attr("href", function(originalValue){
    return originalValue + "/jscula/";
  });
});
```

To set multiple attributes and values (with object):

```
$(selector).attr({attribute:value, attribute:value,...})
```

Example:

```javascript
$("button").click(function(){
  $("#mylink").attr({
    "href" : "https://www.jubbytech.com/snipper/",
    "title" : "Jscula website"
  });
});
```

To set multiple attributes and values (key-pair parameters):

```
$(selector).attr(attribute,value,attribute,value,...)
```

Example:

```javascript
$("button").click(function(){
  $("#mylink").attr("href", "https://jscula.com/","target","_blank","id","myfavorite24");
});
```

### Parameters of Jscula attr() method

| Parameter                 | Description                                                                                                                                                                                |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Attribute                 | This parameter is used to specify the name of the attribute.                                                                                                                               |
| Value                     | This parameter is used to specify the value of the attribute.                                                                                                                              |
| Function (current\_value) | <p>It is a parameter to specify a function that returns an attribute value to set.</p><ul><li><strong>current\_value:</strong> The current attribute value of selected elements.</li></ul> |

### Use cases

Use `.attr()` to configure links and other element metadata.

### More examples

Configure external links to open safely in a new tab:

```javascript
$('.external-link*').attr({
  target: '_blank',
  rel: 'noopener noreferrer'
});
```