多個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

回答

相關問題