[JavaScript] Advanced DOM and Events - Styles, Attributes, and Classes

// Styles (inline)
message.style.backgroundColor = '#37383d';
message.style.width = '120%';

console.log(message.style.color); // nothing in console
console.log(message.style.backgroundColor);

console.log(getComputedStyle(message).color); // getComputedStyle method can get the values of the styles
console.log(getComputedStyle(message).height); // result is string value

message.style.height =
  Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px'; // string to number...

document.documentElement.style.setProperty('--color-primary', 'orangered'); // primary color is changed to 'orangered' color.

// Attributes
const logo = document.querySelector('.nav__logo');
console.log(logo.alt);
console.log(logo.className);

logo.alt = 'Beatiful minimalist logo';

// Non-Standard
console.log(logo.designer);
console.log(logo.getAttribute('designer'));
logo.setAttribute('company', 'Bankist');

console.log(logo.src);
console.log(logo.getAttribute('src'));

const link = document.querySelector('.nav__link--btn');
console.log(link.href);
console.log(link.getAttribute('href'));

// Data attributes
console.log(logo.dataset.versionNumber);

// Classes
logo.classList.add('c', 'j');
logo.classList.remove('c', 'j');
logo.classList.toggle('c', 'j');
logo.classList.contains('c', 'j'); // not inclused

// Don't use this
// logo.className = 'jayden'; // this will overwirte all classes