Attributes, properties and data-*

An attribute is what is written in the HTML tag: href, src, disabled. A property is the current value in the element object, which changes while the user works with the page. jQuery has separate methods for them: attr() and prop().

attr: tag attributes

<a id="help" href="/help">Help</a>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#help').attr('href')); // /help
 
  $('#help').attr('href', '/faq');
  $('#help').attr({ title: 'Frequently asked questions', target: '_blank' });
</script>

The link now points to /faq and opens in a new tab. An object sets several attributes at once.

removeAttr('title') removes an attribute.

prop: the current state

For checkboxes, selected options and disabled buttons use prop(): it returns true or false and reflects the state right now.

<label><input type="checkbox" id="done" checked> Done</label>
<button id="save">Save</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#done').prop('checked')); // true
  console.log($('#done').attr('checked')); // checked
 
  $('#done').prop('checked', false);
  $('#save').prop('disabled', true);
</script>

The checkbox is cleared and the button is disabled. The checked attribute is still in the markup: it only holds the initial state.

data: data in markup

Attributes starting with data- hold your own data: a task id, a priority. data() reads them without the prefix:

<ul>
  <li data-id="7" data-priority="high" data-done="false">Write the report</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $task = $('li');
 
  console.log($task.data('id'));       // 7
  console.log(typeof $task.data('id')); // number
  console.log($task.data('done'));     // false
  console.log($task.data('priority')); // high
</script>

data() converts strings to numbers and booleans by itself, so data('id') returns the number 7, not a string.

Writing with data

<ul>
  <li data-id="7">Write the report</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').data('id', 8);
 
  console.log($('li').data('id'));      // 8
  console.log($('li').attr('data-id')); // 7
</script>

jQuery keeps the written value in its own memory and leaves the attribute in the markup untouched.

The same in plain JavaScript

attr() corresponds to getAttribute() and setAttribute(), prop('checked') to element.checked, data('id') to element.dataset.id (which always returns a string).

Common mistake

Writing a value with data() and then searching by the attribute: $('[data-id="8"]'). The selector looks at the markup, which still says 7. If the value is needed in selectors or CSS, change it with attr('data-id', 8).