# 
## Overview

**`elem.attr()`** is a JQuery method that is used to get the value of an element's attribute. It only gets the attribute value of the first match. 

---
> **Attributes** are used to provide additional information about an element in HTML. 
---

See the `href` attribute of the anchor `<a>` element below:

---
```html
<a href="https://educative.io/answers">VIsit Edpresso!</a>
```

# 
#  Syntax

---
```js
elem.attr(attribute)
```
---

# 
## Parameter

- **`attribute`**: This is the attribute that is present in an element and that we want to know the value of.

##
## Return value

If the element has the attribute, this method returns the value of the attribute passed as a parameter. 

# 
## Code

In the example below, we create some #key# HTML: HyperText Markup Language  #key# elements and use the `.attr()` method to get some of their attribute values. 

Click the button to alert the attributes of elements on the webpage below.

<html>
<head>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
</head>

<body>
  
  <a href="https://educative.io/edpresso">VIsit Edpresso!</a>
  <br/>
  
  <img src="https://picsum.photos/200/300" width="500" height="600">
  <br/>
  
  <p style="color: red">This is about JQuery "attr()" method</p>
  <br/>
  <button>Get attributes of elements</button>
</body>

</html>

$(document).ready(function(){
      // get attributes of "a" element below
      let href = $("a").attr("href")

      // get attributes of "img" element below
      let src = $("img").attr("src")
      let width = $("img").attr("width")
      let height = $("img").attr("height")

      // get attribute of "p" element below
      let style = $("p").attr("style")

      // alert the attributes above
      $("button").click(function(){
        // alert("hello")
       alert("Link has href attribute as: "+href
       +"\nImage has src as "+src+", width as "+width+", and height as " + height
       +"\nParagraph has style attribute as "+style)
      });
    });

codemirror

What is elem.attr() in JQuery?

elem.attr() in jQuery retrieves the value of an element's attribute, returning the value of the first match.