使用来自 JavaScript 的引号和逗号设置 CSS 变量
Set CSS variable with quotes and comma from JavaScript
我有以下 CSS:
:root{
--font-family: "Times", serif;
}
body{
font-family: var(--font-family);
}
我还有一个包含以下值的下拉列表:
serif
sans-serif
'Montserrat', sans-serif;
'Source Code Pro', monospace;
我使用这个下拉列表在主体上设置一个 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
您需要从您的值中删除 ;
以使其有效。
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>
我有以下 CSS:
:root{
--font-family: "Times", serif;
}
body{
font-family: var(--font-family);
}
我还有一个包含以下值的下拉列表:
serif
sans-serif
'Montserrat', sans-serif;
'Source Code Pro', monospace;
我使用这个下拉列表在主体上设置一个 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
您需要从您的值中删除 ;
以使其有效。
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>