如何在jquery/javascript中使用一個按鈕來切換兩個樣式表

-1

我有一個按鈕用於在「輕量級主題」和「黑暗主題」之間切換，但我只設法改變一次，而不是再次回來。我非常感謝任何幫助！如何在jquery/javascript中使用一個按鈕來切換兩個樣式表

<link id="sheet" href="main.css" rel="stylesheet">

$(".themebutton").click(function() { 
if($('a[href="main.css"]')) 
{ 
    $("#sheet").attr('href','dark.css'); 
} 
else { 
    $("#sheet").attr('href','main.css'); 
} 
});

也就是有沒有辦法阻止「閃爍」出現這種情況的樣式表加載時？

來源

2015-12-02 Mahfr

我在答覆中添加一個片段來看看它是如何工作的。 –

要做到這一點，最好的方法是爲html標籤創建一個類名。想象一下，這兩個類：

.theme1 { 
    background:red; 
} 
.theme1 h1 { 
    color: blue; 
} 
.theme2 { 
    background: green; 
} 
.theme2 h1 { 
    color: orange; 
}

您可以在不閃爍，無新的請求到服務器的這樣的切換：

$('.change-theme-1').on('click', function() { 
     $('html').addClass('theme1'); 
}

在這裏，你是一個片段，看看它的工作。

$('.change-theme').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $('html').addClass('theme'+$(this).attr('rel')); 
 
});

.theme1 { 
 
    background:red; 
 
} 
 
.theme1 h1 { 
 
    color: blue; 
 
} 
 
.theme2 { 
 
    background: green; 
 
} 
 
.theme2 h1 { 
 
    color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<html> 
 
    <body> 
 
    <h1>That's a header</h1> 
 
    <button class="change-theme" rel="1">Theme 1</button><br> 
 
    <button class="change-theme" rel="2">Theme 2</button>

來源

2015-12-02 14:36:16

感謝您的回覆！這是一個非常酷的解決方案，但我希望自己省去向所有內容添加新類並進行更改的麻煩，特別是因爲我已經準備好了樣式表。我還需要它只用一個按鈕工作，這是我的主要問題。儘管如此，您的答覆將在未來的項目中派上用場！ – Mahfr

這是正確的方法。在熱門模式下更改樣式表會導致閃爍，延遲加載，向服務器發送新請求和令人頭痛的問題。如果你使用SASS或LESS，你可以用類名包裝所有的代碼，並且你不需要添加類到所有的類。祝你好運！ –

如何在jquery/javascript中使用一個按鈕來切換兩個樣式表

回答

相關問題