JavaScript样式、属性和类别

Styles

● 更改背景颜色

message.style.backgroundColor = '#37383d';

● 也可以更改宽度

message.style.width = '120%';

● 这种赋予style的方式是内联式的，所以我们通过这种方式去读取非内联式的CSS元素式读取不到的，但是在内联式里面的style可以读取到

console.log(message.style.color);
console.log(message.style.backgroundColor);

● 我们可以使用getComputedStyle来获取样式信息

console.log(getComputedStyle(message).color);
console.log(getComputedStyle(message).height);

● 我们也可以使用上面的方法将高度增加

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

console.log(getComputedStyle(message).height);

● 我们也可以动态设置文档根元素（ 元素）的 CSS 变量的值

document.documentElement.style.setProperty('--color-primary', 'orangered');

属性
● 我们可以通过JS读取到HTML文档中的各个属性

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

● 但是这个只能读取到标准属性，例如我们在HTML中再添加一个属性

   <img
          src="img/logo.png"
          alt="Bankist logo"
          class="nav__logo"
          id="logo"
          desc="ItShare"
        />

console.log(logo.desc);

● 我们可以使用getAttribute()方法去读取到

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

● 我们也可以对属性进行修改

logo.alt = '一个好看的图片';

● 当然我们也可以创建属性

logo.setAttribute('来源', '随便搜索');

类

logo.classList.add();
logo.classList.remove();
logo.classList.toggle();
logo.classList.contains();
//logo.classList.add() 方法用于向元素的类列表中添加一个或多个类名。你可以传递一个或多个类名作为参数，多个类名之间用逗号分隔。
//logo.classList.remove() 方法用于从元素的类列表中移除一个或多个类名，与 add() 方法类似，你可以传递一个或多个类名作为参数。
//logo.classList.toggle() 方法用于在元素的类列表中切换一个类名的存在。如果类名存在，则移除它；如果类名不存在，则添加它。这个方法也可以接受一个可选的第二个参数，表示是否强制添加或移除类名。
//logo.classList.contains() 方法用于检查元素的类列表中是否包含指定的类名。如果包含，则返回 true，否则返回 false。

● 下面的尽量不要使用

logo.className = 'Itshare';
//这样会覆盖你之前创建的所有类