Question

我该怎么做？

我试过

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

虽然删除了元素，但样式仍然应用于当前页面（在Opera和Firefox中）。

还有其他办法吗？

Answer 1

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

这也适用于跨浏览器。

e.g

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。这是因为，according to MDN，disabled是property of the HTMLLinkElement DOM object，但不是 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;
        }
    }
};

注意：确保样式文件名是唯一的，这样你就不会有＆＃34; dir1 / style.css＆＃34;和＆＃34; dir2 / style.css＆＃34;。在这种情况下，它将仅禁用第一种样式。

Answer 5

删除样式表：

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

替换样式表：

$('link[src="<path>"]').attr('src','<NEW_FILE_PATH>');

Answer 6

使用纯javascript：

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

Answer 7

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");一样使用它。

Answer 8

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

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;
}

Answer 9

如果您只想使用href属性：

$('link[href="https://example.com/mycss.css"]').remove()

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

9 个答案: