-8

我的 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。

4

6 回答 6

2

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

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

或整个<link>元素：

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

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

于 2013-03-06T18:40:37.483 回答
0

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

  • 保持默认样式表不变。
  • 在第二个样式表中为所有样式声明添加一些独特的类，即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-06T16:47:06.100 回答
0

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

$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');
于 2013-03-06T16:42:10.833 回答
0

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

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

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

文件1.css

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

文件2.css

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

并使用 JavaScript 添加类。

document.body.className = document.body.className==="alt" ? "" : "alt";
于 2013-03-06T18:38:00.167 回答
0

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

于 2013-03-06T16:43:35.343 回答
0

我发现的最简单的方法是在<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-06T16:52:48.760 回答