全てのスタイルを無効にする
ページ内の全てのスタイルを無効にするには、styleSheetsオブジェクトをdisableにします。また、要素に直接style属性が記述されている場合もありますので、これらもカットしてやります。
$(document).ready(function(){ $('#css-naked').click(function(){ $.each($.makeArray(document.styleSheets), function(){ this.disabled=true; }); $('*').removeAttr('style'); }); });通常のサイト構築で使う機会は殆ど無いでしょうが、サイトが正しく構造化されているか、クローラーから見た際にページがどのように見えるのかなどを検証するのには適しています。
(もっとも、その場合はjQueryなどを含まずbookmarklet化しておくなどが良いでしょうし、WebDeveloperToolsなどを用いれば更に簡単ですが)
さて、何故こんなTipsを書いたかといえば、本日(4月9日)はCSS Naked Dayだからです。
たまには、デコレーションを取り払った形でサイトを見直してみるのもいいかもしれませんねということで、CSS Naked Dayバージョン用のスクリプトを書いてみました。
こういったイベントが好きな方は、是非お試しを。