用户的多个 CSS 选项[关闭]答案

【问题标题】：Multiple CSS option for users [closed]用户的多个 CSS 选项[关闭]
【发布时间】：2013-02-21 13:55:32
【问题描述】：

我的 head 部分中有这两个 CSS 文件：

<link href="css1.css" rel="stylesheet" type="text/css" /> 
<link id="css2" href="css2.css" rel="stylesheet" type="text/css" />

这个href：

<a href="#" onclick="document.getElementById('css2').href='css2.css'">Change</a>

页面显示 css2（背景颜色设置为绿色），但我希望它显示 css1（红色），然后单击 css2 链接，它应更改为 css2。

【问题讨论】：

那么问题是什么？
你看过这个吗？ stackoverflow.com/questions/2011176/…
Joel，Stack Overflow 遵循严格的问答格式，很难准确说出您的问题是什么。你能澄清一下这个问题吗？

标签： javascript css

【解决方案1】：

您可以通过 disabled property 禁用/启用第二个样式表：

document.getElementById('css2').sheet.disabled = true;

或整个<link> 元素：

document.getElementById('css2').disabled = true;

这样声明就不会覆盖第一个声明。您尝试更改链接的 href 也可以，但为此您需要只有一个在 "css1.css" 和 "css2.css" 之间切换的 <link> 标记。

【讨论】：

【解决方案2】：

您始终可以使用 JavaScript（或者在本例中为 jQuery）动态添加另一个外部 CSS 文件：

$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');

【讨论】：

【解决方案3】：

为站点创建一个默认样式表并为特定用户创建其他样式表。然后用 javascripts 或 php 覆盖默认样式

【讨论】：

【解决方案4】：

如果您问“当用户单击其中一个链接时如何在两个样式表之间切换”，我建议采用以下方法：

保持默认样式表不变。
在第二个样式表中的所有样式声明前加上一些独特的类，即alternative-css
当用户单击“替代”链接时，将类添加到高级元素（例如<html>、<body> 或包装器<div>

例如：

HTML：

<body>
    <a href="#" id="main">Main Style</a>
    <a href="#" id="alt">Alternative Style</a>
    <div id="wrapper">
        <p>Some text</p>
    </div>
</body>

样式表：

#wrapper {
    background: #000;
}
p {
    color: #fff;
}

替代样式表：

.alternative-css #wrapper {
    background: #fff;
}
.alternative-css p {
    color: #000;
}

JS：

$('#main').click(function(){$('body').removeClass('alternative-css')});
$('#alt').click(function(){$('body').addClass('alternative-css')});

PS：我知道你没有用 jQuery 标记这个问题......但这更多地意味着作为一个概念，在 vanilla JS 中编写点击处理程序应该不会太难。

【讨论】：

【解决方案5】：

我发现的最简单的方法是在<body> 标记中设置一个类并使用一个 CSS 文件，但定义了两组 CSS 定义，并为每组添加一个类名前缀。

设置一个默认类（例如，<body class="bodyClass1">），然后，当您想要更改外观时，您只需使用 JavaScript 将该类更新为另一个类。

这样做的好处是，所有类都在页面加载时加载，并且任何常见的样式都可以在“类特定”定义之外进行编码。

例子：

body {...}
a {...}
div {font-weight: bold;}

.bodyClass1 div {font-size: 10px;}

.bodyClass2 div {font-size: 12px;}

【讨论】：

【解决方案6】：

它不起作用，因为您在页面加载时同时加载了两个文件。所以当然这将是从一开始第二个文件的颜色，因为两个文件都在那里。

页面需要从一个文件开始。

另一种选择是加载两个文件，但规则基于主体上的类。

file1.css

body { background-color: yellow; }
h1 { color: red }

file2.css

body.alt {background-color: green; }
body.alt h1 { color : blue; }

然后使用 JavaScript 添加类。

document.body.className = document.body.className==="alt" ? "" : "alt";

【讨论】：