使用 onchange 事件动态更改 CSS 样式文件答案

【问题标题】：Dynamically changing CSS style files with onchange event使用 onchange 事件动态更改 CSS 样式文件
【发布时间】：2018-06-12 06:31:41
【问题描述】：

我目前能够直接通过 JS 动态更改样式规则，但我发现这更受限制，我宁愿能够热交换整个 CSS 样式表文件。有什么建议吗？

我的代码：

<label>Themes :</label>
<select name="background" id="bg" onchange="changeBg(this)">
    <option value="white">Default</option>
    <option value="#444">Dark</option>
    <option value="teal">Teal</option>
</select>

// Changing Themes
function changeBg(x){
    var body = document.getElementById('body');
    body.style.backgroundColor = x.value;
}

也许我会有多个样式表定义，如下所示：

<!-- Themes -->
    <link type="text/css" rel="stylesheet" media="all" href="style.css" id="theme1_css">
    <link type="text/css" rel="stylesheet" media="all" href="themes/dark.css" id="theme2_css">
    <link type="text/css" rel="stylesheet" media="all" href="themes/teal.css" id="theme3_css">

【问题讨论】：

保存 HTTP 请求并在 <html> 中使用主类名称。将主题 CSS 更改为 .dark body { /* props */ }, .teal body { /* props */ }
见stackoverflow.com/questions/19844545/…
或者看到这个stackoverflow.com/questions/13735247/…，而不是标签名称的元素，你可以给链接一个id，然后把它作为目标来改变它的href
它不适用于 onchange 事件@Stuart
问题是，我也在使用引导程序。因此，如果我用新的 css 标签替换所有链接标签，那么所有包含引导程序的链接也将被删除。我不想那样

标签： javascript jquery html css

【解决方案1】：

基本思想是您可以使用disabled 属性来设置/取消设置主题：

<link rel="stylesheet" type="text/css" href="dark.css" data-theme="dark">
<link rel="stylesheet" type="text/css" href="light.css" data-theme="light">

还有：

function setTheme(theme) {
    var styles = document.querySelectorAll('link[rel="stylesheet"]');
    styles.forEach(function(style) {
        var styleTheme = style.getAttribute('data-theme');
        style.disabled = styleTheme && styleTheme !== theme;
    });
}

现在使用以下内容设置主题：

setTheme('light');

【讨论】：

【解决方案2】：

所以我把 js 脚本编辑成这样：

// Changing Themes
function changeBg(x){
    var link = document.getElementById('theme1_css');
    link.href = 'themes/' + x.value + '.css';
}

感谢：感谢@Pete

【讨论】：