Как динамически удалить таблицу стилей с текущей страницы

Question

Есть ли способ динамически удалить текущую таблицу стилей со страницы?

Например, если страница содержит:

<link rel="stylesheet" type="text/css" href="http://..." />

... есть ли способ позже отключитьэто с JavaScript?Дополнительные баллы за использование jQuery.

Answer 1

Что ж, при условии, что вы можете нацелить его с помощью jQuery, все будет просто, как вызов remove() для элемента:

$('link[rel=stylesheet]').remove();

Это удалит всех внешних таблиц стилей на странице. Если вы знаете часть URL-адреса, то можете удалить только тот, который ищете:

$('link[rel=stylesheet][href~="foo.com"]').remove();

И в Javascript

это пример удаления всех с помощью селектора запросов и массива 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]);
}

Answer 2

Если вы знаете идентификатор таблицы стилей, используйте следующее. Разумеется, любой другой способ получения таблицы стилей работает. Это прямой DOM и не требует использования каких-либо библиотек.

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

Answer 3

Я нашел эту страницу, когда искал способ удаления таблиц стилей с помощью jquery. Я думал, что нашел правильный ответ, когда прочитал следующее

Если вы знаете часть URL, тогда вы можете удалить только тот, который вы ищете: $('link[rel=stylesheet][href~="foo.com"]').remove();"

Мне понравилось это решение, потому что таблицы стилей, которые я хотел удалить, имели одно и то же имя, но находились в разных папках. Однако этот код не работал, поэтому я изменил оператор на *=, и он отлично работает:

$('link[rel=stylesheet][href*="mystyle"]').remove();

Просто подумал, что поделюсь этим на случай, если это кому-нибудь пригодится.

Answer 4

Вероятно, не очень элегантно, но существует более одного способа кожи кошки! (Или кролик , если это не твое дело!)

Используется jQuery для манипулирования document.styleSheets:

$.each($.grep(document.styleSheets, function(n) {
    return n.href.search(/searchRegex/) != -1;
}), function(i, n) {
    n.disabled = true;
});

Это отключит любую таблицу стилей, содержащую «searchRegex» в URL. (См. str.search() и регулярные выражения .)

Легко изменить это на чистый JavaScript. Удалить $.each() и $.grep() в пользу простого for-loop :

for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(/searchRegex/) != -1) {
        document.styleSheets[i].disabled = true;
    }
}

Answer 5

Это сбросит стилизацию вашей страницы, удалив все элементы стиля.Кроме того, jQuery не требуется.

Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
  try{
    element.parentNode.removeChild(element)
  }catch(err){}
});

Answer 6

Никто не упоминал об удалении определенной таблицы стилей без идентификатора в обычном Javascript:

 document.querySelector('link[href$="something.css"]').remove()

("$ =" найти в конце href)

Answer 7

Предположим, что вы хотите удалить класс myCssClass, тогда самый простой способ сделать это - element.classList.remove ("myCssClass");

Answer 8

Это для отключения всех <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){}
});