根据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文件

回答

相关问题