如何切換外部CSS文件？

Question

我有幾本書，我正在閱讀AJAX，但還是很新的。 所有教程和這些書都有無處不在的例子：自動填充搜索欄和異步表單驗證器。 這些都很棒，但不是我想要的。 具體來說，我想單擊一個按鈕並在我的標題包中切換外部CSS文件。 這可能嗎？ 嗯......我知道這是可能的，但是你怎么做的？

PS：我在這個項目中有jQuery，所以如果有內置的東西，那就更好了！

PPS：我意識到我沒有收錄重要信息（不要開槍！）：

最終目標是擁有一個用戶設置部分，用戶可以單擊單選按鈕並確定他們想要用於我們的應用程序的顏色方案。 所以我們最終會有8種不同的CSS樣式可供選擇。 不確定這是否會改變實現這一目標的最佳方法。
用戶正在登錄他們的帳戶並在那里更改他們的設置。 我希望他們的更改能夠“堅持”，直到他們決定再次更改樣式表。 我可以在MySQL中手動執行此操作，因為我們有一個名為樣式表的表，其中各種用戶樣式表都已編號...所以實際上，我需要做的是異步更改MySQL值，以便立即加載CSS。

Answer 1

將一個id屬性添加到CSS link標記以使用JavaScript操作標記：

<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">

設置href屬性的Javascript類似於：

document.getElementById('cssfile').href = 'css/carrot.css';

用戶可以通過單擊鏈接調整顏色：

<a href="#"
 onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>

通過更改媒體類型，這還可以允許用戶快速更改打印布局，移動設備（或平板電腦）上的首選布局等。

此解決方案不需要jQuery。

另見： http ： //www.webmasterworld.com/forum91/4554.htm

Answer 2

jQuery中的樣式表切換器。

為了回應“新手跟進”評論，我將嘗試使其更具說明性。

我可以在這里找到我正在玩的用於測試的頁面。

頁面顯示

您將希望將當前樣式表顯示在每個頁面的<head>中的<link>標記中。 <link>標記需要一個id以供稍后在JavaScript中參考。 就像是：

<?php 
  // Somewhere in the server side code, $current_stylesheet is read from the user's 
  // "preferences" - most likely from a database / session object
  $current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />

改變偏好

顯示用戶樣式表后，您需要一種方法來更改它。 創建一個<form> ，當用戶更改樣式表時，它將向服務器發送請求：

<form method="GET" id="style_form" >
  <select name="stylesheet" id="styleswitch">
    <option value="css1.css">Black &amp; White</option>
    <option value="css2.css" selected="selected">Shades of Grey</option>
   </select>
   <input value='save' type='submit' />
</form>

服務器端

現在，如果沒有jQuery，提交此表單應該在當前頁面上獲取（如果您願意，可以將其更改為POST） stylesheet={new stylesheet} 。 所以在你的bootstrap / sitewide包含文件的某個地方，你做了一個檢查，一個php示例：

$styles = array(
  'css1.css' => 'Black &amp; White',
  'css2.css' => 'Shades of Grey',
);

if (!empty($_GET["sytlesheet"]) {
  // VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT
  // $styles is the array of styles:
  if (array_key_exists($_GET["stylesheet"], $styles)) {
    $user->stylesheet = $_GET["stylesheet"];
    $user->save();
  }
}

實時預覽

在這一點上，你有一個功能齊全的styleswitcher為沒有javascript的跛腳的人。 現在你可以添加一些jQuery來使這一切更優雅地發生。 你將需要使用jQuery Form Plugin來創建一個很好的ajaxForm()函數，它將處理提交表單。 將jQuery和jQuery表單庫添加到頁面：

<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>

現在我們已經包含了庫 -

$(function() {
  // When everything has loaded - this function will execute:


  $("#style_form").ajaxForm(function() {
    // the style form will be submitted using ajax, when it succeeds:
    // this function is called:
    $("#thediv").text('Now Using: '+$('#styleswitch').val());
  });

  $("#styleswitch").change(function() {
    // When the styleswitch option changes, switch the style's href to preview
    $("#stylelink").attr('href', $(this).val());
    // We also want to submit the form to the server (will use our ajax)
    $(this).closest('form').submit();
  });

  // now that you have made changing the select option submit the form,
  // lets get rid of the submit button
  $("#style_form input[type=submit]").remove();
});

Answer 3

這是一個使用jQuery的例子。

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style1.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                $('#change-css').click(function(e){
                    e.preventDefault();
                    $('link[rel="stylesheet"]').attr('href', 'style2.css');
                });
            });
        </script>
    </head>
    <body>
        <a id="change-css" href="#">change css</a>
    </body>
</html>

操作行是$('link[rel="stylesheet"]').attr('href', 'style2.css'); 。 這將找到任何具有rel="stylesheet" <link>標記，並將其href屬性更改為style2.css 。

Answer 4

它與Ajax無關。 它與JS和DOM操作（搜索教程的一些關鍵詞）有關。
我正在使用Mootools，這是一個JS庫，它有一個內置的功能。
如果手動執行此操作，那么我只需將<link>元素添加到<head>或調整現有<link>元素的href屬性。

 <link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6063" id='bobo'>
...
...
...
<script>document.getElementById('bobo').href="http://my.doamin.com/new.css";</script>

Answer 5

您還可以使用正文類名加載兩個CSS文件並在第二個文件上添加所有選擇器。

body.secondsheet {}
body.secondsheet a {}
body.secondsheet hr {}

然后，您所要做的就是在body標簽中添加/刪除“secondsheet”類以切換樣式表。

Answer 6

要向頁面添加新的css文件，只需創建一個新的<link>標記：

function addCss (url) {
    var s = document.createElement('link');
    s.rel = 'stylesheet';
    s.type = 'text/css';
    s.href = url;
    document.getElementsByTagName('head')[0].appendChild(s);
}

addCss('http://path/to/stylesheet.css');

要從頁面中刪除css文件，只需刪除<link>即可：

function removeCss (search) {
    var css = document.getElementsByTagName('link');
    for (var i=0;i<css.length;i++) {
        var c = css[i];
        if (c.rel === 'stylesheet' || c.type === 'text/css') {
            if (c.href && c.href.match(search)) {
                c.parentNode.removeChild(c);
            }
        }
    }
}

// Remove all css that contains 'mycss_', can use regexp if necessary:
removeCss(/mycss_.*\.css/);

如何切換外部CSS文件？

問題描述

6 個解決方案

解決方案1
16 2010-01-19 02:30:36

解決方案2
4 已采納 2010-01-19 03:19:04

jQuery中的樣式表切換器。

頁面顯示

改變偏好

服務器端

實時預覽

解決方案3
3 2010-01-19 02:33:06

解決方案4
1 2010-01-19 02:32:07

解決方案5
1 2010-01-29 19:59:07

解決方案6
0 2010-01-19 02:29:47

如何切換外部CSS文件？

問題描述

6 個解決方案

解決方案1 16 2010-01-19 02:30:36

解決方案2 4 已采納 2010-01-19 03:19:04

jQuery中的樣式表切換器。

頁面顯示

改變偏好

服務器端

實時預覽

解決方案3 3 2010-01-19 02:33:06

解決方案4 1 2010-01-19 02:32:07

解決方案5 1 2010-01-29 19:59:07

解決方案6 0 2010-01-19 02:29:47

解決方案1
16 2010-01-19 02:30:36

解決方案2
4 已采納 2010-01-19 03:19:04

解決方案3
3 2010-01-19 02:33:06

解決方案4
1 2010-01-19 02:32:07

解決方案5
1 2010-01-29 19:59:07

解決方案6
0 2010-01-19 02:29:47