如何使用 Jquery 和 Django 更改样式表

Question

您好，我已经尝试解决这个问题很长一段时间了。当我使用 vanilla html 时，这段代码似乎可以工作。 （从平铺视图更改为列表视图）。现在我已经将它合并到 django 并且 hrefs 包含静态标签，我不知道如何在 jquery 中引用它并更改它的 href。请帮忙

HTML

<link rel="stylesheet" type="text/css" href="{% static "Stylesheets/tileVersion.css"  %}">

我想改成这个css href

<link rel="stylesheet" href="../Stylesheets/listVersion.css">

JQUERY

$('#listicon').click(function () {
        $('link[href="static/Stylesheets/tileVersion.css"]').attr('href', 'static/Stylesheets/listVersion.css');
    });
    $('#tilesicon').click(function () {
        $('link[href="static/Stylesheets/listVersion.css"]').attr('href', 'static/Stylesheets/tileVersion.css');
    });

如果可能的话，我希望能够在它们之间切换。任何形式的帮助将不胜感激

Answer 1

你可以做两件事之一。

1. 通过在代码中使用 if 标记从变量或数据源获取 css 链接值（地址/url），您可以使用静态引用将一个 CSS 文件加载到另一个文件上。这在服务器时间编译。这也意味着在运行时只加载一个 css。这对客户端来说是静态的。例如：

2. 与 #1 相同，但您可以使用内联 if 来确定将哪一个转发给客户端。

3. 最后，确保两个 css 文件都保存在静态进程中，并维护您的 jquery： $('#listicon').click(function () { $('link[href="{% static /path/to/first/css/page %}"]').attr('href', '{% static /path/to/first/css/page %}'); }); $('#tilesicon').click(function () { $('link[href="{% static /path/to/second/css/page %}"]').attr('href', {% static /path/to/second/css/page %}); }); 我是出于记忆而输入的，所以请多多包涵。 希望这会有所帮助。

Answer 2

只需为链接标签添加一个附加属性id。您可以从head 中删除当前的stylesheet 并添加另一个。

<link rel="stylesheet" id="myid" href="../Stylesheets/listVersion.css">

$('#myid').remove();
$('head').append( $( '<link/>', {'rel' : 'stylesheet', 'id': 'myid', 'href':'newlink' } ));