javascript - 如何使用 javascript 或 jquery 添加和删除外部 css

Question

我正在使用我的网页并且我正在使用外部 css，我想要的是当浏览器调整到它的最小尺寸时，预加载的样式表将删除并用最小尺寸的新样式表替换它的浏览器。但我不知道该怎么做。有人可以帮助我吗？

Answer 1

在这种情况下你最好的选择是使用 CSS media queries ，例如:

@media (max-width: 200px) {
    /* ...styles to apply up to 200 wide... */
    body {
        /* ... */
    }
}

@media (min-width: 201px) {
    /* ...styles to apply when more than 200 wide... */
    body {
        /* ... */
    }
}

---

但是，回答您实际提出的问题:

由 style 或 link 元素添加的样式表将在您删除该元素时被删除。所以你可以这样做:

$("selector for the old stylesheet").remove();

...删除旧的，然后

$("<style>...</style>").appendTo('head');

...添加另一个(或者，当然，一个 link 元素)。

您可以使用 window 上的 resize 事件触发该过程:

$(window).on("resize", function() {
    // ...do something
});