jQuery-включить / отключить все таблицы стилей на странице по щелчку

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

12
css jquery stylesheet

6 ответов

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

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

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

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

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

для повторного включения всех таблиц стилей:

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

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

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

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

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

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/

0

Я обнаружил, что во всех браузерах для меня работает следующее:

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

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

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

0

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

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

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

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