Module 4: Build in and Custom Data Attributes

Attributes
//anything that's provided to an element other than the info
//They work like properties.

pic.alt = 'Cute Pup'; //setter
//don't say Image of or Picture of.

pic.width = 200;

console.log(pic.alt); //getter

console.log(pic.naturalWidth); //getter
//you have to wait for the image to download before you can get the width.

window.addEventListener('load', function() {
console.log(pic.naturalWidth);
}
//This will wait for everything to load before running the function.

pic.window.addEventListener('load', function() {
console.log(pic.naturalWidth);
}
//You can do that for just one pic and wait for it to load.

pic.width = 500;
//change the width attribute.

pic.getAttribute('alt');
console.log()

pic.setAttribute('alt', 'really cute pip');
//

pic.hasAttribute
//returns if it has an attribute. true or false if it has been set.

attach a data attribute
data-name="blah"

to access them:
classname.dataset

custom.addEventListener('click', function() {
alert(`Welcome ${custom.dataset.name `);
});