根據jquery函數加載和卸載CSS文件

我有兩個css文件。這兩個文件已經加載。當一個文本框（jQuery datepicker框）點擊'first.css'想要加載和'second.css'被卸載。選擇日期後，卸載'first.css'文件並加載'second.css'文件。在當前階段使用選擇器非常困難，因爲這些樣式在許多其他地方使用。根據jquery函數加載和卸載CSS文件

點擊一個文本框加載'first.css'並卸載'second.css'，然後在onclick函數中使用jQuery，反之亦然。

來源

2011-11-30 Justin John

使用[css]標籤，而不是[css3]或[css-selectors]，因爲您的問題與CSS3或選擇器無關。 – BoltClock

我有意見，只是一個建議。另一種方法，將2個CSS合併爲一個，只需使用像'body1.content'和'body2.content'這樣的規則，然後只使用jquery控制'removeClass'和'addClass'來切換'>'和''。 – Giberno

如果您希望在加載頁面時加載兩個CSS文件並在點擊事件之間切換它們，可以通過禁用/啓用加載的CSS文件來實現。

function toggleClass() { 
    var switcher = $("link[href*='first.css']").attr("disabled"); 
    $("link[href*='first.css']").attr({"disabled":!switcher}); 
    $("link[href*='second.css']").attr({"disabled":switcher}); 
}

來源

2011-11-30 11:53:13 Ketola

實現這一目標的最簡單的方法是添加並從body標籤刪除類，即已經first設置爲上body類，然後用second替換它。如果你改變你的css文件，讓這些類作爲選擇器的一部分，那麼這會給你加載和卸載文件的效果。

來源

2011-11-30 11:40:26

這是比較容易的，但它的更好，如果你只有一個樣式表加載的頁面首先加載：

<head> 
    <!-- other stuff --> 
    <link href="http://path/to/dayglo.css" type="text/css" rel="stylesheet" /> 
    <!-- any other stuff --> 
</head> 

<select id="switch"> 
    <option value="dayglo">Day-Glo</option> 
    <option value="dark">Dark</option> 
</select>

的jQuery：

$('#switch').change(
    function(){ 
     var url = 'http://path/to/' + $(this).val() + 'css'; 
     $('link[rel="stylesheet"]').attr('href',url); 
    });

或者你可以簡單地把類屬性，或者添加或刪除id，以便使用該屬性指定規則：

body.dayglo h1 { 
    /* whatever */ 
} 

body.dark h1 { 
    /* whatever */ 
}

jQuery的：

$('#switch').change(
    function(){ 
     $('body').removeAttr('class').addClass($(this).val()); 
    });

這種方法意味着你只需要一個樣式表，並依賴於選擇的特異性應用各種風格。

來源

2011-11-30 11:41:06

根據jquery函數加載和卸載CSS文件

回答

相關問題