Question

我有两个css文件。两个文件都已加载。当一个文本框（jQuery datepicker框）点击'first.css'想要加载并且'second.css'被卸载时。选择日期后，卸载'first.css'文件并加载'second.css'文件。在当前阶段使用选择器是非常困难的，因为这些样式在许多其他地方使用。

单击文本框是否可以加载'first.css'并卸载'second.css'。然后使用jQuery在onclick函数上反之亦然。

Answer 1

这是相对简单的，但如果首次加载页面时只加载一个样式表会更好：

<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());
    });

这种方法意味着您只需要一个样式表，并依赖于选择器的特殊性来应用各种样式。

Answer 2

如果您希望在页面加载时加载两个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});
}

Answer 3

实现此目的的最简单方法是在body标记中添加和删除类，即将first设置为body上的类，然后将其替换为second }。如果你改变你的css文件让这些类作为选择器的一部分，那么这将给你与加载和卸载文件相同的效果。

CSS文件根据jquery函数加载和卸载

3 个答案: