🍋 Styles, Attributes and Classes

1. Styles

//직접 style 설정하기 (inline)
messagebanner.style.backgroundColor = "#37383d";
messagebanner.style.width = "120%";

// inline이 아니면 console에 찍히지 않음
console.log(messagebanner.style.height);
// 그 때는 getComputedStyle로 찍는다
console.log(getComputedStyle(messagebanner).height);

2. Attributes

const logo = document.querySelector(".nav__logo");
// can read standard attributes only
console.log(logo.alt);
console.log(logo.className); //nav__logo

// non-standard attribute
logo.setAttribute("designer", "kiwi");
console.log(logo.designer); //undefined
console.log(logo.getAttribute("designer")); //kiwi

// data attributes
console.log(logo.dataset.versionNumber)

3. Classes

logo.classList.add('c');
logo.classList.remove('c');
logo.classList.toggle('c');
logo.classList.contains('c');