先看這個固定例子
筆記原有 base、lesson。固定程式明確開啟 highlight，再核 class 名稱和綠色邊線。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">工作坊筆記</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.classList.toggle('highlight',true);
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["base","lesson","highlight"]| 核對項目 | 所給輸入或動作 | 結果 |
|---|---|---|
| 改動前 | base lesson | ["base","lesson"] |
| 明確開啟後 | highlight | ["base","lesson","highlight"] |
| 邊線 | .highlight | 2px 綠色實線 |
原生機制怎樣處理
classList 是跟着 class 屬性更新的 DOMTokenList。toggle(token,true) 確保該名稱存在，其他名稱不動；force false 則移除。重複 true 不會加出重複名稱，className 賦值卻會替換整串屬性。
比較另一寫法
className 改成 highlight，base、lesson 就失去。邊線看似正確，也不代表原名稱仍在。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">工作坊筆記</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.className='highlight';
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["highlight"]試清邊界
highlight 明確開兩次、關一次後，還剩哪些名稱？
查看參考答案
剩 base、lesson。明確開啟不會重複加入，關閉也只移除 highlight。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">工作坊筆記</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.classList.toggle('highlight',true);note.classList.toggle('highlight',true);note.classList.toggle('highlight',false);
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["base","lesson"]