應用並刪除大型CSS樣式部分

我想根據用戶首選項更改頁面樣式。應用並刪除大型CSS樣式部分

頁面將以給定樣式加載，但如果用戶單擊某個按鈕，則頁面佈局應該更改。如果他再次點擊，風格應該變回原始風格。這些變化很大（大約70條CSS線），但只改變了特定頁面的一部分。

我可以編寫一個JavaScript函數來修改所有相關標籤的CSS樣式，但這將是單調乏味的，並會在我的代碼中引入過多的CSS。如果可以，我寧願將它保存在CSS文件中。

我還可以在所有相關的變量添加樣式A CSS文件，參照A類和所有相關的變量添加樣式B CSS文件，參照B類。然後，JavaScript代碼將只需更改相關標籤上的類。

解決此問題的最佳方法是什麼？

來源

2016-03-23 summerbulb

切換的'body'類（或更相關的父對象），然後修改你的CSS是基於這個類。這樣，所有的UI都只受到1行JS代碼的影響。 –

這正是我需要的。請將其添加爲答案 – summerbulb

爲您添加的答案。 –

要做到這一點，你可以切換上body類（或更相關的父對象），然後修改你的CSS是基於這個類。這樣，所有的UI都只受到1行JS代碼的影響。例如：

$('#foo').click(function() { 
    $('body').toggleClass('foobar'); 
});

.example { 
    background-color: red; 
} 

body.foobar .example { 
    background-color: blue; 
}

來源

2016-03-23 08:34:02

你也可以查看類似這樣的內容。點擊後，你可以添加/刪除鏈接到另一個CSS文件。

var ss = document.createElement("link") 
ss.type = "text/css" 
ss.rel = "stylesheet" 
ss.href = "style.css" 
document.getElementsByTagName("head")[0].appendChild(ss);

來源

2016-03-23 08:31:14 Samot

你可以做這樣的事情，沒有劇本，只是CSS，並且很容易實現，也很容易有一個以上的佈局之間切換。

.toggle { 
 
    display: inline-block; 
 
    padding: 3px 10px; 
 
    border: 1px solid; 
 
    background: #eee; 
 
    margin-bottom: 20px; 
 
} 
 
#toggle, #toggle2 { 
 
    display: none; 
 
} 
 

 
#toggle:checked ~ label[for=toggle], 
 
#toggle2:checked ~ label[for=toggle2] { 
 
    background: #aaa; 
 
} 
 

 
#toggle:checked ~ .container { 
 
    display: none; 
 
} 
 

 
#toggle2:checked ~ .container img:last-child { 
 
    display: none; 
 
}

<input id="toggle" type="checkbox"> 
 
<label for="toggle" class="toggle"> 
 
    Toggle 
 
</label> 
 
<input id="toggle2" type="checkbox"> 
 
<label for="toggle2" class="toggle"> 
 
    Toggle 2 
 
</label> 
 

 
<div class="container"> 
 
    
 
    <img src="http://placehold.it/200x200" alt=""> 
 
    <img src="http://placehold.it/200x200" alt=""> 
 
    <img src="http://placehold.it/200x200" alt=""> 
 

 
</div>

來源

2016-03-23 08:41:50 LGSon

應用並刪除大型CSS樣式部分

回答

相關問題