jQuery get attributes and values of element

Question

Say I have this HTML code:

    <img id="idgoeshere" src="srcgoeshere" otherproperty="value" />

I can reference the element by its id: $('#idgoeshere')) Now, I want to get all the properties and their values on that element:

src=srcgoeshere
otherproperty=value

Is there some way I can do that programmatically using jQuery and/or plain Javascript?

Please be aware that a property of an element is not the same thing as an attribute of an element. — Flimm, Jun 12 '15 at 09:15

score 5 · Accepted Answer · answered Apr 07 '11 at 15:35

You can get a listing by inspecting the attributes property:

var attributes = document.getElementById('idgoeshere').attributes;
// OR
var attributes = $('#idgoeshere')[0].attributes;
alert(attributes[0].name);
alert(attributes[0].value);

$(attributes).each(function()
{
    // Loop over each attribute
});

score 2 · Answer 2 · answered Apr 07 '11 at 15:34

2

The syntax is

$('idgoeshere').attr('otherproperty')

For more information - http://api.jquery.com/attr/

answered Apr 07 '11 at 15:34

Tomas McGuinness

7,651
3
28
40

I think he wants to list all attributes, not some concrete one. – František Žiačik Apr 07 '11 at 15:37

score 0 · Answer 3 · answered Jul 20 '12 at 10:07

0

Try this:

var element = $("#idgoeshere");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);});

answered Jul 20 '12 at 10:07

Aki143S

809
7
5

score 0 · Answer 4 · answered Apr 07 '11 at 15:36

0

Yes you can!

Jquery:

var src = $('#idgoeshere').attr('src');
var otherproperty = $('#idgoeshere').attr('otherproperty');

Javascript:

var src = document.getElementById('idgoeshere').getAttribute('src');
var otherproperty = document.getElementById('idgoeshere').getAttribute('otherproperty');

answered Apr 07 '11 at 15:36

Daniel Node.js

6,734
9
35
57

you can also set the properties: – Daniel Node.js Apr 07 '11 at 15:37

score 0 · Answer 5 · answered Apr 07 '11 at 15:36

0

You can use attr for that:

For eg.

var mySrc = $('#idgoeshere').attr("src");
var otherProp = $('#idgoeshere').attr("otherproperty");

answered Apr 07 '11 at 15:36

Sang Suantak

5,213
1
27
46

score 0 · Answer 6 · edited May 23 '17 at 12:00

0

If you want to just get a list of all the attributes, see the answers to this question: Get all Attributes from a HTML element with Javascript/jQuery

edited May 23 '17 at 12:00

Community

1
1

answered Apr 07 '11 at 15:41

jches

4,542
24
36

jQuery get attributes and values of element

6 Answers6