使用JavaScript/jQuery删除或替换样式表(<link>)

Question

我怎样才能做到这一点？

我试过了

$('link[title="mystyle"]').remove();

虽然删除了元素,但样式仍然应用于当前页面(在Opera和Firefox中).

还有其他方法吗？

Answer 1

为了满足你的需要,你必须将样式表设置为禁用,因为它将css样式保存在内存中,因此删除元素将无法工作,如果我没记错的话,它也会导致它在某些情况下崩溃.

这也适用于跨浏览器.

例如

document.styleSheets[0].disabled = true;

//所以在你的情况下使用jquery尝试

$('link[title=mystyle]')[0].disabled=true;

Answer 2

我成功地做到了:

$('link[title="mystyle"]').attr('disabled', 'disabled');

看来这是从内存中删除样式的唯一方法.然后我补充说:

$('link[title="mystyle"]').remove();

也删除元素.

Answer 3

要禁用所选样式表:

$('link[title="mystyle"]').prop('disabled', true);

如果您再也不希望再次应用样式表,那么就可以.remove()了.但如果您希望以后能够重新启用它,请不要这样做.

要重新启用样式表,请执行此操作(只要您没有remove样式表的元素):

$('link[title="mystyle"]').prop('disabled', false);

在上面的代码中,重要的是使用.prop,而不是.attr.如果您使用.attr,代码将在某些浏览器中运行,但不适用于Firefox.这是因为,根据MDN,disabled是所述的属性HTMLLinkElementDOM对象,但不是所述的一个属性link的HTML元素.使用disabled作为HTML属性是非标准的.

Answer 4

没有jQuery解决方案

如果您可以在链接标签中添加ID

<link rel="stylesheet" href="css/animations.css" id="styles-animations">

document.getElementById("styles-animations").disabled = true;

如果您知道文档中CSS文件的索引位置

document.styleSheets[0].disabled = true; // first
document.styleSheets[document.styleSheets.length - 1].disabled = true; // last

如果要按名称禁用样式，可以使用此功能

/**
 * @param [string]  [styleName] [filename with suffix e.g. "style.css"]
 * @param [boolean] [disabled]  [true disables style]
 */
var disableStyle = function(styleName, disabled) {
    var styles = document.styleSheets;
    var href = "";
    for (var i = 0; i < styles.length; i++) {
        href = styles[i].href.split("/");
        href = href[href.length - 1];

        if (href === styleName) {
            styles[i].disabled = disabled;
            break;
        }
    }
};

注意：确保样式文件名是唯一的，所以您没有“ dir1 / style.css”和“ dir2 / style.css”。在这种情况下，它将仅禁用第一种样式。

Answer 5

使用纯 javascript：

var stylesheet = document.getElementById('stylesheetID');
stylesheet.parentNode.removeChild(stylesheet);