我有以下CSS：
:root{
--font-family: "Times", serif;
}
body{
font-family: var(--font-family);
}
我還有一個包含以下值的下拉串列：
serif
sans-serif
'Montserrat', sans-serif;
'Source Code Pro', monospace;
我使用這個下拉選單在 body 上設定一個 CSS 變數：
let root = document.documentElement;
const fontSelect = document.querySelector("#font")
fontSelect.addEventListener("change", e => {
console.log(fontSelect.value);
root.style.setProperty('--font-family', fontSelect.value);
});
每次，都會發生正確的控制臺日志，但僅在 Google Chrome 中應用serif。sans-serif我怎樣才能'Montserrat', sans-serif;作業？
https://codepen.io/EightArmsHQ/pen/3405e40daa7fcc7b17ff8a0e6a205b66
uj5u.com熱心網友回復：
您需要;從值中洗掉以使其有效。
let root = document.documentElement;
const fontSelect = document.querySelector("#font")
fontSelect.addEventListener("change", e => {
console.log(fontSelect.value);
root.style.setProperty('--font-family', fontSelect.value);
});:root{
--font-family: "Times", serif;
}
body{
font-family: var(--font-family);
}<select id="font">
<option value="serif">Serif</option>
<option value="sans-serif">Sans serif</option>
<option value="'Montserrat', sans-serif">Montserrat</option>
<option value="'Source Code Pro', monospace">Source Code Pro</option>
</select>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421148.html
標籤：
上一篇：如何自定義圖示到我的顯示較少按鈕
下一篇：HTML/CSS中的按鈕影片