plainJS

Functions / Attributes

Set, get, and remove properties of DOM elements

jQuery $.prop()

2015 page

This is the original page from 2015, kept at its address while the tested rewrite is in progress. The code is of its time: it ran in Internet Explorer and does not use what browsers have gained since. The rewrite replaces it here.

In short

Get the value of an input field or the href of an anchor. Learn how to work with element properties.

While jQuery provides an extra method for setting and getting element property values, there’s no such thing in plain JavaScript. Element properties, such as href, title, alt, and value, are directly accessible as JavaScript object properties:

Here are some examples:

js
var el = document.querySelector('a');
console.log(el.href);
if (el.title != 'foo') el.title = 'foo';

var inp = document.querySelector('input[type="text"]');
console.log(inp.value);
inp.value = 'Hello World!';

HTML attributes, such as class or href are directly bound to their element’s properties. Meaning if you change the property, the attribute gets changes, as well – and vice versa.

It’s also allowed to create custom properties:

js
var el = document.querySelector('div');
el.foo = { bar: true };
console.log(el.foo);

To remove such a property at a later time, use the delete statement:

js
delete el.foo;