This tutorial shows how to get the attribute value of a clicked item with jQuery, any attribute which is added in that HTML tag (id, class, name, title, src, etc.).
- To get the attribute value of an element with jQuery, it is used attr() function.
Syntax:

$(element).attr('attribute_name')
    - If the "attribute_name" not exists in "element", the attr() function will return "undefined".

To reffer to the clicked element, you use the $(this) instruction, so, the syntax to get the value of an attribute of a clicked HTML element is:
$(element).click(function(){
  var attrval = $(this).attr('attribute_name');
});
Now, here's some code, and examples.

Get attribute value of an element by Class

In this case, the HTML element is selected by "class".
    • Get the ID:
$('.class').click(function(){
  var id = $(this).attr('id');
});

    • Get the "title" (for example, of an anchor <a> with specified class):
$('.class').click(function(){
  var title = $(this).attr('title');
});

    • Get the "name" (for example, of a form element with specified class):
$('.class').click(function(){
  var name = $(this).attr('name');
});

Example, get the ID and SRC address of a clicked image with class="imgs":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an element by ID

In this case, the HTML element is selected by "id".
    • Get the "class":
$('#id').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" (for example, of a form element with specified "id"):
$('#id').click(function(){
  var name = $(this).attr('name');
});

Example, get the "class" and "alt" attributes of a clicked image with id="idimg":
Click on this image:
<img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="clsimg" id="idimg" width="180" height="60" />
<script type="text/javascript"><!--
$(document).ready(function() {
  $('#idimg').click(function(){
    var classimg = $(this).attr('class');
    var altimg = $(this).attr('alt');
    alert('Class: '+ classimg+ '\n Alt: '+ altimg);
  });
});
--></script>
Demo:
Click on this image: Courses: coursesweb.net

Get attribute value of an item selected by Tag-Name

If you want to get the value of an attribute of a clicked item which is selected by Tag Name, you can use these codes:
    • Get the ID of clicked DIV:
$('div').click(function(){
  var id = $(this).attr('id');
});

    • Get the "class" of clicked paragraph (<p>):
$('p').click(function(){
  var class = $(this).attr('class');
});

    • Get the "name" of "input" field:
$('input').click(function(){
  var name = $(this).attr('name');
});

Example, get the "id" and "class" attributes of any clicked DIV:
<div id="idiv" class="clsdiv">Click on this text:<br/>
Free Web Programming Courses - https://coursesweb.net/</div>
<script type="text/javascript"><!--
$(document).ready(function() {
  $('div').click(function(){
    var idd = $(this).attr('id');
    var classdiv = $(this).attr('class');
    alert('ID is: '+ idd+ '\n Class: '+ classdiv);
  });
});
--></script>
Demo:
Click on this text:
Free Web Programming Courses - https://coursesweb.net/

- You can get the value of other attributes too, like "alt", "src" (in <img>), or "rel".

• To get the value of an attribute of any clicked item, use '*' as selector.
      Example, get the ID of any clicked element:
$('*').click(function(){
  var id = $(this).attr('id');
});

• In the same way you can get the attributes value of HTML items on other events, like: mouseover(), focus() .

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a color well control for selecting a color value?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Which CSS method rotates the HTML element at a given degree?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click on the function that returns the number with the highest value.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Which function prevent the same file from being included more than once in a page?
include() include_once() require()
include_once("some_file.php");
Get Attribute (ID, Class, Name, Title, Src) with jQuery

Last accessed pages

  1. JQZoom Image Magnifier (10735)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (98402)
  3. JavaScript Course - Free lessons (17103)
  4. Show and Hide HTML elements (670)
  5. Paragraphs, Line break, Horizontal rule (2426)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (816)
  2. Contact page - CoursesWeb (790)
  3. Tabs effect with CSS (786)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (344)
  5. PHP getElementById and getElementsByTagName (234)