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

我怎样才能做到这一点?

我试过了

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

尽管删除了该元素,但样式仍适用于当前页面(在Opera和Firefox中)。

还有其他办法吗?

Alex asked 2020-01-13T10:57:57Z
9个解决方案
61 votes

为了满足您的需要,例如,您必须将样式表设置为禁用,因为它会将css样式保留在内存中,因此删除该元素将不起作用,如果我没有记错的话,在某些情况下它也可能导致其崩溃。

这也适用于跨浏览器。

例如

document.styleSheets[0].disabled = true;

//所以在你的情况下使用jQuery try

$('link[title=mystyle]')[0].disabled=true;
redsquare answered 2020-01-13T10:58:23Z
18 votes

我设法做到这一点:

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

看来这是从内存中删除样式的唯一方法。然后我添加:

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

也要删除元素。

Alex answered 2020-01-13T10:58:51Z
11 votes

禁用所选样式表:

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

如果您从不希望再次应用该样式表,则可以HTMLLinkElement。 但是,如果您以后想重新启用它,就不要这样做。

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

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

在上面的代码中,重要的是使用HTMLLinkElement,而不是HTMLLinkElement。如果使用HTMLLinkElement,该代码将在某些浏览器中有效,但在Firefox中不起作用。 这是因为根据MDN,disabledHTMLLinkElement DOM对象的属性,而不是link HTML元素的属性。 使用disabled作为HTML属性是非标准的。

Rory O'Kane answered 2020-01-13T10:59:26Z
5 votes

没有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”。 在这种情况下,它将仅禁用第一种样式。

Petr Hurtak answered 2020-01-13T11:00:03Z
3 votes

删除样式表:

$('link[src="<path>"]').remove();

替换样式表:

$('link[src="<path>"]').attr('src','<NEW_FILE_PATH>');
Hasan Al-Natour answered 2020-01-13T11:00:28Z
1 votes

使用纯JavaScript:

var stylesheet = document.getElementById('stylesheetID');
stylesheet.parentNode.removeChild(stylesheet);
Sky Yip answered 2020-01-13T11:00:48Z
1 votes

ES6解决方案:

const disableStyle = styleName => {
  const styles = document.styleSheets;
  let href = "";
  for (let i = 0; i < styles.length; i++) {
    if (!styles[i].href) {
      continue;
    }
    href = styles[i].href.split("/");
    href = href[href.length - 1];
    if (href === styleName) {
      styles[i].disabled = true;
      break;
    }
  }
};

disableStyle("MyUnwantedFile.css");一样使用它。

fernanDOTdo answered 2020-01-13T11:01:12Z
0 votes

这是使用其他许多文章中提到的禁用原理进行的添加和删除,以防止跨浏览器问题。 注意我的添加如何检查工作表是否已经存在,在这种情况下,它只是启用了它。 此外,与某些答案相反,此方法旨在使用.css文件的url作为函数的唯一参数(使客户端避免使用idtitle属性)。

function element( id ){ return document.getElementById( id ); }

function addStyleSheet( url ){
    var id = _styleSheetUrlToId( url );
    if( !_enableStyleSheet( id ) ) {
        var link  = document.createElement("link");
        link.href = url;
        link.type = "text/css";
        link.rel  = "stylesheet"; 
        link.id   = id; 
        document.getElementsByTagName("head")[0].appendChild( link );
    }
}

function removeStyleSheet( url )
{ _enableStyleSheet( _styleSheetUrlToId( url ), false ); }

// "protected" function
function _styleSheetUrlToId( url ){ 
    var urlParts = url.split("/");
    return urlParts[urlParts.length-1].split(".")[0]
           + "-style";
}

// "protected" function
// returns if the sheet was found 
function _enableStyleSheet( id, enable ) {
    if( typeof(enable) == "undefined" ) enable = true;
    var sheet = element( id );
    if( sheet ) {
        sheet.disabled = !enable;
        return true;        
    }
    return false;
}
BuvinJ answered 2020-01-13T11:01:32Z
0 votes

如果只想使用href属性:

$('link[href="https://example.com/mycss.css"]').remove()
NicolasZ answered 2020-01-13T11:01:52Z
translate from https://stackoverflow.com:/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery