多个CSS选择

-7

我在我的头部分有两个CSS文件：多个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。

来源

2013-03-06 Joel

那么问题是什么？ – robert 2013-03-06 16:40:46

你看过吗？ http://stackoverflow.com/questions/2011176/changing-a-stylesheet-using-jquery – 2013-03-06 16:44:03

乔尔，堆栈溢出遵循严格的问答格式，很难准确地告诉你的问题是什么。你能澄清这个问题吗？ – dgvid 2013-03-06 16:44:12

你总是可以用JavaScript动态添加另一个外部CSS文件（或在这种情况下的jQuery）：

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

来源

2013-03-06 16:42:10

创建网站默认的样式表，并创建其他样式表面向特定用户。然后覆盖默认的样式与他们的JavaScript或php

来源

2013-03-06 16:43:35 madhushankarox

如果你问“我怎么能当用户点击一个链接的两个样式之间切换”，我会sugest以下方法：

按原样保留您的默认样式表。
前言所有的样式声明在你的一些独特的类第二个样式，即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中编写点击处理程序应该不会太困难。

来源

2013-03-06 16:47:06 Steve

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

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

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

例子：

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

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

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

来源

2013-03-06 16:52:48 talemyn

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

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

其他选项是您加载这两个文件，但规则是基于身体上的一个类。

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

来源

2013-03-06 18:38:00 epascarello

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

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

或整个<link>元素：

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

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

来源

2013-03-06 18:40:37 Bergi

回答

相关问题