Question

我的脑子里有这两个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。

Answer 1

您可以通过disabled property

禁用/启用第二个样式表

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

或整个<link>元素：

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

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

Answer 2

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

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

Answer 3

为网站创建默认样式表，并为特定用户创建其他样式表。然后使用javascripts或php

覆盖默认样式

Answer 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编写点击处理程序应该不会太难。

Answer 5

我找到的最简单的方法是在<body>标记中设置一个类并使用一个CSS文件，但是定义两组CSS定义，在每个集合前面添加一个类名。

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

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

示例：

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

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

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

Answer 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";

用户的多个CSS选项

6 个答案: