【Day23】我变我变我变变变：如何改变HTML元素的样式

「DOM API定义了JavaScript存取、改变HTML架构、内容、样式的方法，甚至对节点绑定的事件。」

前面几篇提到了JavaScript改变HTML架构与内容的方法，这一篇我们来谈谈怎麽改变HTML的样式。

再来看一下前面提到的「前端三要素」：

• HTML负责网页的结构与内容
• CSS负责网页的外观与样式
• JavaScript负责网页的互动与行为

样式是由CSS负责，所以当我们想要改变HTML的样式，当然就是要用JavaScript来处理CSS这一块，而这都要先从选取到某个节点开始。

• 选取HTML元素，直接修改style属性
• 透过className属性来修改style样式。
• 用classList属性，透过删除或新增class来修改style样式
• 用setAttribute()来更改class属性

直接修改HTML元素的style

使用JavaScript直接修改HTML元素的style，因为这种方式是透过DOM API直接修改元素的行内样式，样式的优先权会比其他样式的写法高出许多。

//可以在'string'中指定许多种样式，样式之间用;隔开就
node.style.cssText = 'string';

//也可以把某个样式，例如字型大小单独挑出来
node.style.fontSize = '24px';

我们试着把黄药师写的诗，用JavaScript来改变其样式：

<div class="style1" style="color: red; font-size: 45px; border: 3px solid;width: 400px;">
  桃花影落飞神剑，
</div>
<div class="style2" style="color: yellow;font-size: 45px;text-decoration:underline;">
  碧海潮生按玉箫
</div>

看看下面的JavaScript，cssText将要改的样式写在同一行，而且会完全盖掉本来写在style1的全部样式，我在cssText里面并没有输入border的参数，而本来写在行内样式的border却被完全清除了，最後网页上呈现的结果并没有border。

如果用「style.CSS属性名称」的方式，就可以针对想要改变的属性来做处理。唯一要注意的是有些CSS属性名称中间有 - 的破折号，如font-size、font-weight… 等等属性，但是在JavaScript的变数及物件属性名称是不允许使用 - 破折号，这时属性名称就要改成「驼峰式」写法，如fontSize。

var el1 = document.querySelector(".style1").style.cssText = 'font-size: 24px; color: green;';
var el2 = document.querySelector(".style2");
el2.style.fontSize = "16px";
el2.style.color = "blue";

透过className属性来修改style样式

透过修改HTML「行内样式」来调整网页的外观，虽然很方便，但是我们说过「CSS负责网页的外观与样式」，如果老是透过「行内样式」来调整网页外观，就做不到HTML、CSS、JavaScript三者「关注点分离」，而且实务上，大多是以HTML连结CSS档案的方式来设定网页的外观与样式。

那要如何透过修改HTML标签的class属性，来改变元素的样式呢?

JavaScript提供了className的属性来修改HTML元素的class。

node.className = '元素的class名称'

我们一样用黄药师的诗来讲解，我们给它两个class属性，分别为 redfont与bigtitle。

<h1 class="redfont bigtitle">桃花影落飞神剑，碧海潮生按玉箫</h1>

以下为外部CSS档的内容：

.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.bluefont {
  color: blue;
}

先选取节点，然後用className的方法，把 <h1> 标签的本来的 class 取代为 bluefont，我们会发现，除了本来的redfont 之外，连 bigtitle 也被清除掉了。所以如果本来HTML标签有设定多组 class 属性，用 className 的方法并不会保留其他没有被修改的属性，而是整个 class 被清空，再以className 新增的属性取代。

var el = document.querySelector('.redfont');
el.className = 'bluefont'

用classList属性，透过删除或新增class来修改style样式

classList 与 className 不同之处在於不能直接修改，而是必须透过 claaList.add() 与 classList.remove() 来增加与删减 HTML 标签的 class 属性，如果你的 HTML 标签有 red 与 big 两个 class 样式，你想把 red 改成 green，必须先 classList.remove(red) ，把 red 这个 class 移除，然後再 classList.add(green) ，把 green 这个 class 加入。

<h1 class="redfont bigtitle">桃花影落飞神剑，碧海潮生按玉箫</h1>

这是CSS档：

.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.greenfont {
  color: green;
}

而这是JavaScript，用来改变 <h1> 标签内的class，redfont会被greenfont置换，而bigtitle会保留下来。

var el = document.querySelector('.redfont');
el.classList.remove('redfont');
el.classList.add('greenfont');

还有一个切换 class 的方法，那就是el.classList.toogle('class名称') ，当所选的元素没有这个class样式的时候，就新增这个样式；如果已经有这个 class 样式的时候，就会变成删除它。

var el = document.querySelector('.redfont');
el.classList.toggle('redfont'); //现在是增加
el.classList.toggle('redfont'); //现在是删除

用setAttribute()来更改class属性

还有一种方式可以用来更改 HTML 元素的 class 属性，但是它的使用范围更广泛一些：

element.setAttribute('属性名称','属性值');
//属性名称可以是 class、 id、 href
//属性值对应的分别是 class名称、 id名称 及 网址 

让我们来看看怎麽做：

<h1 class="redfont bigtitle">桃花影落飞神剑，碧海潮生按玉箫</h1>

.redfont {
  color: red;
}
.bigtitle {
  font-size: 40px;
}
.bluefont {
  color: blue;
}

var el = document.querySelector('.redfont');
el.setAttribute('class','bluefont');

用 setAttribute() 来修改 HTML 元素的 class ，跟className 一样，也是会先把 class 清空，再用新增的class 设定值取代，所以 bigtitle 这个 class 也会被清除掉。

以上就是几种修改HTML元素样式的方法。