用 JavaScript 改 CSS
工作室墙上已经有一块色卡。标题是 Oak，色样上写着 open。样式表里 #swatch 的规则把 color 设成 navy，把 font-size 设成 16px。类 dusk 还没加在色样上，它的规则是 font-style: italic。用 JavaScript 改 CSS，就是写行内样式，或加上这个类。open 这个词留在原地。
element.style 只显示行内声明。所以在任何写入之前，swatch.style.color 和 swatch.style.fontSize 都是空字符串。实际用到的字号来自 getComputedStyle(swatch).fontSize，是 16px。
swatch.style.color = "teal" 和 swatch.style.fontSize = "22px" 把这两个行内值存下来。写成 style.font-size 是语法错误。背景用 setProperty("background-color", "wheat") 来设。之后 getPropertyValue("background-color") 和 style.backgroundColor 都读到 wheat。
classList.add("dusk") 只加上类。style.color 仍是 teal，style.fontStyle 仍是空的，getComputedStyle(swatch).fontStyle 变成 italic。
另有一次旁路试验：cssText = "color: maroon;"。这一行换掉整段行内声明。行内字号和背景变成空的，类 dusk 还在。页面演示不跑这一行。它先记下 teal，再用 removeProperty("color") 只清掉行内颜色。色卡下面那一行是 teal / 22px / empty / dusk。色样文字仍是 open。
写的是样式声明，不是色卡上的新句子
上一页写了 textContent、innerHTML 和 insertAdjacentHTML，改的是轮渡纸条上的词。这一页不给色样赋 textContent，不解析标签，也不比较查找节点的办法。getElementById 只把色卡交到手里。要学的是行内样式和类名记号。
每次写入在色样上留下什么
色样从 open 这个词开始。navy 和 16px 来自样式表，这时还没有行内样式。按顺序读每一行。cssText 那一行是旁路试验。页面演示停在 removeProperty，不执行那一次清空。
📊 每次写入在色样上留下什么
| 写入 | 行内字符串 | 仍来自样式表或类 | 容易混 |
|---|---|---|---|
| 还没写 | color 和 fontSize 是 "" |
计算后的 fontSize 是 16px；实际颜色是 navy |
从 style.color 读出 navy |
style.color = "teal" 且 style.fontSize = "22px" |
teal 和 22px |
背景还不是行内 | style.font-size 无法解析 |
setProperty("background-color", "wheat") |
backgroundColor 是 wheat |
颜色仍是 teal | 用 background-color 代替驼峰名 |
classList.add("dusk") |
fontStyle 仍是 ""；颜色仍是 teal |
计算后的 fontStyle 是 italic |
以为 style.fontStyle 会变成 italic |
removeProperty("color") |
color 又是 "" |
fontSize 仍是 22px |
以为字号会回到 16px |
style.cssText = "color: maroon;" |
颜色 maroon；fontSize 和背景是 "" |
类 dusk 还在 |
以为 cssText 会去掉类 |
element.style 只是行内声明。样式表规则不会出现在那里，除非脚本把它抄进行内样式。getComputedStyle 读的是样式表、类和行内样式合在一起之后的实际值。同一个属性上，行内值压过样式表。classList 改的是类名记号。它不写 style.color，也不写 style.fontStyle。cssText 用一个字符串换掉整个 style 属性。removeProperty 删掉一个行内属性，其余留下。
先读色卡，再写
文件打开时有标题 Oak、文字 open，以及上面的样式表。还没有任何赋值。前三条日志问的是行内样式。第四条问实际字号。
let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);
日志是 open、空字符串、空字符串和 16px。实际颜色是 navy，浏览器用 rgb() 形式报出来，不是 navy 这个词。style.color 仍是空的，所以那条日志不是 navy。标题 Oak 是另一个元素。后面的写入不改 open 这个词。
驼峰名写入行内值
color 和 fontSize 是样式声明上的属性。CSS 里的 font-size 在 JavaScript 里写成 fontSize。带点的 style.font-size 会被当成减法，这个文件不用它。
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
日志是 teal、22px 和空字符串。背景还没设。实际字号现在是 22px，因为行内值压过样式表的 16px。色样上的词仍是 open。
带连字符的名字走 setProperty
setProperty 接收 CSS 属性名，连字符也算在内。getPropertyValue 读的是同一个名字。backgroundColor 读到的就是刚存下的值。
let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);
两条日志都是 wheat。color 仍是 teal，fontSize 仍是 22px。这次调用加上一个行内属性。已经写下的那些不会被清掉。
类不会填满 style.fontStyle
.dusk 写的是 font-style: italic。加上类，只是把记号 dusk 放到元素上。italic 这个值活在样式表规则里，所以行内的 fontStyle 字符串仍是空的。行内颜色仍是 teal，类没有把它换掉。
let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);
日志是 true、teal、空字符串和 italic。contains 看的是记号。style.fontStyle 看的是行内声明。getComputedStyle 看的是实际值。这是三种不同的读法。
cssText 换掉整段行内样式
这一块是旁路试验。只有在 teal、22px、wheat 和 dusk 都已经就位时才运行。给 cssText 赋值会写下新的 style 属性，字符串里没写的行内属性都会丢掉。下面的页面演示不含这一行。
let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));
日志是 maroon、空字符串、空字符串和 true。行内的 22px 和 wheat 没了。类 dusk 还在，因为 cssText 改的是 style 属性，不是 class 属性。色样文字仍是 open。
色卡下面的一行
脚本在 body 末尾，色卡和样式表都已经存在。它设下 teal、22px 和 wheat，加上 dusk，记下 teal 这个词，然后只去掉行内颜色。它不给 cssText 赋值。空的行内颜色写成 empty 这个词，好让这一行读得出来。
<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>
这一行是 teal / 22px / empty / dusk。saved 留着 removeProperty 之前的 teal。调用之后 style.color 是空的，style.fontSize 仍是 22px。背景仍是 wheat。类记号仍是 dusk，所以实际的 font-style 是 italic。实际颜色回到样式表，也就是 navy，因为行内颜色没了。色样文字仍是 open。下一页会新建元素。它不另给一种写法来写这些样式属性。
核对色卡
- 记下文字、两条行内字符串和计算后的字号，期望是 open、两个空字符串和 16px
- 把 color 设成 teal、fontSize 设成 22px，然后期望 teal、22px 和空的 backgroundColor
- 用 setProperty 设背景，两种读法都期望 wheat；再加 dusk，期望 true、teal、空的 fontStyle，以及计算后的 italic
- 在旁路试验里把 cssText 设成颜色 maroon，期望 maroon、空的 fontSize、空的背景，并且 dusk 仍是 true
- 读页面那一行，期望 teal / 22px / empty / dusk；读色样文字，期望 open
这块色卡上的失误
页面照样能打开。赋值写错了值的种类。
- 一开始读
style.color，却期望 navy - 写
swatch.style.font-size，解析器会拒绝 - 期望
classList.add("dusk")把 italic 存进style.fontStyle - 期望这个类把
style.color从 teal 改掉 - 赋了
cssText还期望行内的22px还在 - 赋了
cssText还期望类dusk消失 - 调用
removeProperty("color")还期望fontSize回到16px - 在这里给色样设
textContent；上一页才是改文字 - 在这里调用
createElement；下一页才新建节点
带走这些
element.style读的是行内声明；开头style.color是空的，实际字号是16pxstyle.color和style.fontSize存着 teal 和22pxsetProperty("background-color", "wheat")和style.backgroundColor是同一个值classList.add("dusk")让style.fontStyle保持为空，实际样式是 italiccssText = "color: maroon;"清掉其他行内值，类还留着removeProperty("color")只清颜色，所以页面那一行仍能显示22px- 这一行是 teal / 22px / empty / dusk，色样文字仍是 open
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部