Question

我脑子里有一个样式表如下：

<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

如果正文#main.whatever类发生变化（例如在不同的页面上），我试图用上面的样式表替换上面的样式表。

即

改变自： 体＃main.itemid113

于： 体＃main.itemid114

<script>
jQuery(document).ready(function() {

   $('body#main.itemid113').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />');

   $('body#main.itemid114').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css" type="text/css" />');

});
</script>

我该怎么做 - 以上不起作用。

这是正确的吗？

jQuery(function($){
    if ($('.itemid113').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />");
    };
    if ($('.itemid114').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

Answer 1

实现此目的的最简单方法是在链接标记中添加一个ID，即：

<link id="theme" rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

然后你的脚本变成：

jQuery(function($){
    if ($('.itemid113').length){
        $('#theme').attr("href","/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css");
    };
    if ($('.itemid114').length){
        $('#theme').attr("href", "/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

如果body类改变，使用jQuery替换CSS样式表

1 个答案: