Javascript 如何从当前页面动态删除样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5033650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically remove a stylesheet from the current page
提问by Nathan Osman
Is there a way to dynamically remove the current stylesheet from the page?
有没有办法从页面中动态删除当前样式表？
For example, if a page contains:
例如，如果页面包含：
<link rel="stylesheet" type="text/css" href="http://..." />
...is there a way to later disable it with JavaScript? Extra points for using jQuery.
...以后有没有办法用 JavaScript 禁用它？使用 jQuery 的额外积分。
回答by Brian Donovan
Well, assuming you can target it with jQuery it should be just as simple as calling remove()on the element:
好吧，假设您可以使用 jQuery 定位它，它应该就像调用remove()元素一样简单：
$('link[rel=stylesheet]').remove();
That will remove allexternal stylesheets on the page. If you know part of the url then you can remove just the one you're looking for:
这将删除页面上的所有外部样式表。如果您知道 url 的一部分，那么您可以只删除您正在寻找的那个：
$('link[rel=stylesheet][href~="foo.com"]').remove();
And in Javascript
在 Javascript 中
this is an example of remove all with query selector and foreach array
这是使用查询选择器和 foreach 数组删除所有内容的示例
Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
try{
element.parentNode.removeChild(element);
}catch(err){}
});
//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
elements[i].parentNode.removeChild(elements[i]);
}
回答by Sir Robert
If you know the ID of the stylesheet, use the following. Any other method of getting the stylesheet works as well, of course. This is straight DOM and doesn't require using any libraries.
如果您知道样式表的 ID，请使用以下内容。当然，任何其他获取样式表的方法也都有效。这是直接的 DOM，不需要使用任何库。
var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);
回答by user5936810
I found this page whilst looking for a way to remove style sheets using jquery. I thought I'd found the right answer when I read the following
我在寻找使用 jquery 删除样式表的方法时发现了这个页面。当我阅读以下内容时，我以为我找到了正确的答案
If you know part of the url then you can remove just the one you're looking for:
$('link[rel=stylesheet][href~="foo.com"]').remove();"
如果您知道 url 的一部分，那么您可以只删除您正在寻找的那个：
$('link[rel=stylesheet][href~="foo.com"]').remove();"
I liked this solution because the style sheets I wanted to remove had the same name but were in different folders. However this code did not work so I changed the operator to *=and it works perfectly:
我喜欢这个解决方案，因为我想删除的样式表具有相同的名称但位于不同的文件夹中。但是这段代码不起作用，所以我将运算符更改为*=，它运行良好：
$('link[rel=stylesheet][href*="mystyle"]').remove();
Just thought I'd share this in case it's useful for someone.
只是想我会分享这个以防万一它对某人有用。
回答by Damien ó Ceallaigh
Probably not very elegant, but there is more than one way to skin a cat! (Or a rabbit, if that's not your thing!)
可能不是很优雅，但是给猫剥皮的方法不止一种！（或者一只兔子，如果那不是你的东西！）
This uses jQuery to manipulate document.styleSheets:
这使用 jQuery 来操作document.styleSheets：
$.each($.grep(document.styleSheets, function(n) {
return n.href.search(/searchRegex/) != -1;
}), function(i, n) {
n.disabled = true;
});
This will disable any stylesheet containing "searchRegex" in the URL. (See str.search()and regular expressions.)
这将禁用 URL 中包含“searchRegex”的任何样式表。（请参阅和正则表达式。）str.search()
It is easy to change this to be pure JavaScript. Remove $.each()and $.grep()in favour of a simple for-loop:
很容易将其更改为纯 JavaScript。删除$.each()并$.grep()支持一个简单的for 循环：
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].href.search(/searchRegex/) != -1) {
document.styleSheets[i].disabled = true;
}
}
回答by Damien ó Ceallaigh
This will reset your page's styling, removing all of the style-elements. Also, jQuery isn't required.
这将重置您页面的样式，删除所有样式元素。此外，不需要 jQuery。
Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
try{
element.parentNode.removeChild(element)
}catch(err){}
});
回答by DarckBlezzer
This is for disable all <style>from html
这是为了<style>从 html 中禁用所有
// this disable all style of the website...
var cant = document.styleSheets.length
for(var i=0;i<cant;i++){
document.styleSheets[i].disabled=true;
}
//this is the same disable all stylesheets
Array.prototype.forEach.call(document.styleSheets, function(element){
try{
element.disabled = true;
}catch(err){}
});
回答by eon
Nobody has mentioned removing a specific stylesheet without an ID in plain Javascript:
没有人提到在纯 Javascript 中删除没有 ID 的特定样式表：
document.querySelector('link[href$="something.css"]').remove()
("$=" to find at end of href)
（“$=”在href末尾查找）
回答by jrgermain
To expand on Damien's answer, the testmethod (which returns trueor false) would probably be a better fit than searchand is slightly faster. Using this method would yield:
为了扩展Damien 的答案，该test方法（返回trueor false）可能比它更适合search并且稍微快一些。使用这种方法会产生：
for (var i = 0; i < document.styleSheets.length; i++) {
if (/searchRegex/.test(document.styleSheets[i].href)) {
document.styleSheets[i].disabled = true;
}
}
If you don't care about IE support this can be cleaned up with a for...of loop
如果你不关心 IE 支持，这可以用 for...of 循环清理
for (const styleSheet of document.styleSheets) {
if (/searchRegex/.test(styleSheet)) {
styleSheet.disabled = true;
}
}
回答by AtashG79
Suppose you want to remove a class myCssClass then the most easy way to do it is element.classList.remove("myCssClass");
假设你想删除一个类 myCssClass 那么最简单的方法是 element.classList.remove("myCssClass");
