JQuery - включение/отключение всех таблиц стилей на странице при нажатии

Можно ли обнаружить все таблицы стилей на текущей странице нажатием кнопки "отключить/включить CSS" и отключить их при первом щелчке, чтобы ни один стиль не применялся, а затем восстановить их еще раз при втором нажатии? Любая идея, что будет выглядеть jQuery, если это возможно?

Ответ 1

$('link[rel="stylesheet"]').attr('disabled', 'disabled');

это должно отключить все из них, затем наоборот, чтобы их можно было заменить:

$('link[rel="stylesheet"]').removeAttr('disabled');

Ответ 2

Чтобы отключить все таблицы стилей:

$('link[rel~="stylesheet"]').prop('disabled', true);

Чтобы снова включить все таблицы стилей:

$('link[rel~="stylesheet"]').prop('disabled', false);

Я использую селектор атрибутов ~= здесь вместо =, чтобы селектор по-прежнему работал со списками стилей, где атрибут rel alternate stylesheet, а не только stylesheet.

Кроме того, важно использовать .prop, а не .attr. Если вы используете .attr, код не будет работать в Firefox. Это связано с тем, что в соответствии с MDN, disabled является объектом объекта HTMLLinkElement DOM, но не атрибут элемента link HTML. Использование disabled в качестве атрибута HTML нестандартно.

Ответ 3

$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');

Ответ 4

Вот пример, который основан на назначении идентификатора стилю, а затем удалении и восстановлении его с помощью переменной.

HTML

<style id="test">
.test{
  background: red;
  width: 100px;
  height: 100px;
}
</style>
<div class="test">Something</div>
<div id="remove">Click to Remove</div>
<div id="restore">Click to Restore</div>

Javascript

var css = $("#test");
$("#remove").click(function(){
    css.remove();
});

$("#restore").click(function(){
    $("head").append(css);
});

Рабочий пример http://jsfiddle.net/Fwhak/

Ответ 5

Я нашел найденное для всех браузеров для меня:

CSS Link:
<link rel="stylesheet" href="http://basehold.it/22" data-role="baseline">

JQuery:
$('link[data-role="baseline"]').attr('href', '');

Вышеуказанное отключит только одну таблицу стилей, и это можно было бы включить и выключить.

Ответ 6

Вот еще один метод, который вы можете попытаться сделать.

$('*[rel=stylesheet]').attr('disabled', 'true');
$('link[rel=stylesheet]').attr('disabled', 'true');

а с другой стороны вы удалите этот атрибут

$('link[rel=stylesheet]').attr('disabled', 'false');
$('*[rel=stylesheet]').attr('disabled', 'false');