动态替换css文件（并将新样式应用于页面）

时间：2013-11-07 19:08:41

标签： javascript jquery html css

我有一个页面，标题中有<link>，用于加载名为light.css的CSS。我还有一个名为dark.css的文件。我想要一个按钮来交换页面的样式（css文件中有40个选择器，有些在两个文件中不匹配）。

如何删除对light.css的引用并删除所有已应用的样式，然后加载dark.css并应用所有样式？我不能简单地重置所有元素，因为一些样式是通过不同的css文件应用的，有些是由JS动态生成的。没有重新加载页面，有没有一种简单而有效的方法呢？香草JS是首选，但我会使用jQuery进行后续处理，所以jQ也没问题。

8 个答案:

答案 0 :(得分：68)

您可以在文档中包含所有样式表，然后根据需要激活/停用它们。

在我阅读规范时，你应该可以activate an alternate stylesheet by changing its disabled property from true to false，但只有Firefox似乎能正确地做到这一点。

所以我认为你有几个选择：

切换rel=alternate 

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

设置并切换disabled 

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate">

<script>
function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);
</script>

切换media=none 

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark">

<script>
function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}
</script>

您可以使用getElementById，querySelector等选择样式表节点

（避免使用非标准<link disabled>。虽然设置HTMLLinkElement#disabled很好。）

答案 1 :(得分：53)

您可以创建新链接，并用新链接替换旧链接。如果你把它放在一个函数中，你可以在任何需要的地方重用它。

Javascript：

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

HTML：

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

为简单起见，我使用了内联javascript。在制作中，您可能希望使用不显眼的事件侦听器。

答案 2 :(得分：7)

使用jquery你绝对可以交换css文件。按下按钮即可执行此操作。

var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');

或者sam's answer，也可以。这是jquery语法。

$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);

答案 3 :(得分：7)

如果您在链接元素上设置了ID 

<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>

您可以使用Javascript

进行定位 
document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';

或只是.. 

document.getElementById('stylesheet').href='stylesheet2.css';

这是一个更全面的例子：

<head>
    <script>
    function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }
    </script>

    <link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
    <a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
    <a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>

答案 4 :(得分：5)

这个问题已经很老了但是我建议一种这里没有提到的方法，你将在HTML中包含CSS文件，但CSS就像

<强> light.css 

from pandas import DataFrame, merge

da = DataFrame(list_of_dicts)
db = DataFrame(names)
da['_tmpkey'] = db['_tmpkey'] = 1

result = merge(da, db, on='_tmpkey').drop('_tmpkey', axis=1).T.to_dict().values()

和 dark.css 就像

/*** light.css ***/

p.main{
   color: #222;
}

/*** other light CSS ***/

basicall dark.css中的每个选择器都是/*** dark.css ***/ .dark_layout p.main{ color: #fff; background-color: #222; } /*** other dark CSS ***/

的孩子

如果有人选择更改网站的主题，那么您需要做的就是更改body元素的类。

.dark_layout

现在，一旦用户点击$("#changetheme").click(function(){ $("body").toggleClass("dark_layout"); }); ，您的所有元素都会显示黑暗的css。如果您使用任何类型的CSS预处理器，这很容易做到。

您还可以为背景和颜色添加CSS动画，使转换变得非常流畅。

答案 5 :(得分：4)

使用jquery .attr（），您可以设置链接标记的 href .i.e

示例代码

$("#yourButtonId").on('click',function(){
   $("link").attr(href,yourCssUrl);
});

答案 6 :(得分：0)

也许我认为太复杂了，但由于接受的答案对我不起作用，我以为我也会分享我的解决方案。

故事：
我想要做的是包括不同的皮肤＆＃39;我的页面在头部作为额外的样式表添加到＆＃39;主要＆＃39;样式并通过按页面上的按钮切换它们（没有浏览器设置或东西）。

问题：
我认为@ sam的解决方案非常优雅，但对我来说根本不起作用。至少部分问题在于我使用了一个主要的CSS文件，并且只是将其他文件添加到顶部作为“皮肤”＃39;因此我不得不将文件与缺少的＆＃39; 属性进行分组。

这是我想出来的。
首先添加所有皮肤＆＃39;使用＆＃39; alternate＆＃39;：

<link rel="stylesheet" href="css/main.css" title='main'>
<link rel="stylesheet alternate" href="css/skin1.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin2.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin3.css" class='style-skin' title=''>

请注意，我为主CSS文件提供了title =＆＃39; main＆＃39;而所有其他人都有一个类=＆＃39; style-skin＆＃39;没有标题。

要使用jQuery切换皮肤。我让纯粹主义者找到一个优雅的VanillaJS版本：

var activeSkin = 0;    
$('#myButton').on('click', function(){
    var skins = $('.style-skin');
    if (activeSkin > skins.length) activeSkin=0;
    skins.each(function(index){
        if (index === activeSkin){
            $(this).prop('title', 'main');
            $(this).prop('disabled', false);
        }else{
            $(this).prop('title', '');
            $(this).prop('disabled', true);
        }
    });
    activeSkin++
});

它的作用是迭代所有可用的皮肤，采用（很快）活动的皮肤，将标题设置为＆＃39; main＆＃39;并激活它。所有其他皮肤都被禁用，标题被删除。

答案 7 :(得分：0)

只需将您的Link href属性更新为新的CSS文件即可。

function setStyleSheet(fileName){
       document.getElementById("WhatEverYouAssignIdToStyleSheet").setAttribute('href', fileName);
    }
相关问题
最新问题