Как динамически удалять таблицу стилей с текущей страницы
Есть ли способ динамически удалить текущую таблицу стилей со страницы?
Например, если страница содержит:
<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://...'; return false;" />
... есть способ позже отключить его с помощью JavaScript? Дополнительные пункты для использования jQuery.
Ответы
Ответ 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]);
}
Ответ 2
Если вы знаете идентификатор таблицы стилей, используйте следующее. Разумеется, любой другой способ получения таблицы стилей тоже работает. Это прямой DOM и не требует использования каких-либо библиотек.
var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);
Ответ 3
Я нашел эту страницу, ища способ удалить таблицы стилей с помощью jquery. Я думал, что нашел правильный ответ, когда прочитал следующее
Если вы знаете часть URL-адреса, вы можете удалить только тот, который вы ищете: $('link[rel=stylesheet][href~="foo.com"]').remove();"
Мне понравилось это решение, потому что таблицы стилей, которые я хотел удалить, имели одно и то же имя, но были в разных папках. Однако этот код не работал, поэтому я сменил оператор на *=
, и он отлично работает:
$('link[rel=stylesheet][href*="mystyle"]').remove();
Просто подумал, что я поделюсь этим, если это будет полезно для кого-то.
Ответ 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()
в пользу simple for-loop:
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].href.search(/searchRegex/) != -1) {
document.styleSheets[i].disabled = true;
}
}
Ответ 5
Это будет обнулить вашу страницу, удалив все элементы стиля. Кроме того, jQuery не требуется.
Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
try{
element.parentNode.removeChild(element)
}catch(err){}
});
Ответ 6
Это отключает все <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){}
});
Ответ 7
Предположим, вы хотите удалить класс myCssClass, тогда самый простой способ сделать это - element.classList.remove( "myCssClass" );