回答:
最新のページのほとんどが、に含まれる外部CSSファイルのすべてのスタイルを定義していることを考えると<head>
、head
タグを削除すると、すべてのスタイルが効果的に削除されます(明示的なインラインスタイルとスクリプトで設定されたものを除く)。ページを右クリックして、コンテキストメニューから[ 検査 ]を選択し、[コンソール]タブに貼り付けます。
document.head.parentNode.removeChild(document.head);
そして、ここでは、ブックマークのURLとして貼り付けることができ、上記のコードのブックマークレット版である(とChromeのブックマークバートグルは⌘+ shift+ bMacのかctrl+ shift+ bのLinux / Windowsの場合):
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
上記のコードをアドレスバーに直接入力することもできますが、回答の最後にあるメモを読んでから実行してください。。
を削除するに<head>
は、headタグを右クリックしてコンテキストメニューから削除することにより、devtoolsの[ 要素 ]タブからも実行できます。
注:headタグの削除は、すべてのスタイル、javascript、Webフォントなどを強制終了するため、総当たり的なアプローチです。ページコンテンツがjavascriptでレンダリングされる場合、ほとんどの場合、空のページが表示されます。ほとんどのサイトでは、おそらく期待される結果が得られます。
より頻繁な使用例は、ページ上の特定の迷惑なもの(色、余白、iframeなど)を削除することです。このような場合、次のブックマークレットのいずれかでよりきめ細かな制御が可能になります。
ブックマークを作成し、次のスニペットをURLとして追加します。
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()
ブックマークレットをクリックして、現在のページのCSSスタイルを読みやすいものにクリーンアップできます。
注:実際、ページ
<style>
内で<body>
タグ内にブロックを設定することは可能です-HTML5標準ではこれが許可されており、ほとんどのブラウザーでサポートされています。これまでのところこれは一般的な慣行ではありませんが、Webフレームワークが進化するにつれて、将来のWebでより多くの「ローカルスタイルシート」が見られるかもしれません。
読みやすさを改善したいだけの場合、すべてのCSSを無効にすると最高のエクスペリエンスが得られない場合があります。そのような場合、以下のブックマークレットでより良い結果が得られる可能性があります。
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()
javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29
これにより、ほとんどの埋め込み動画、コメントウィジェットなども削除されます。
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();
注:ほとんどのバナー画像は通常iframe内にあり、このブックマークレットはトップレベルのドキュメントでのみ機能するため、これは上記のiframeの削除と組み合わせて使用する必要があります。
ブックマークレットは、広告ブロッカーが使用されている場合にコンテンツを表示しないサイトにも使用できます。
Bookmarklet Builderを使用して、コードを縮小し([ フォーマット ]ボタン)、必要に応じて編集し、ブックマークURLとして貼り付けることができるものに縮小します([ 圧縮 ]ボタン)。
上記のブックマークレットは、iOSとAndroidの両方のほとんどのモバイルWebブラウザーでも機能します。モバイルブラウザはアドレスバーからjavascriptを実行しませんが、ブックマークを追加し、jsコードをURLとして貼り付け、ラベルを設定してから、
clean
ブックマークメニューのアイテムをタップして実行できます(IOSサファリの場合)またはclean
、アドレスバーに入力してから、自動提案ドロップダウンの対応するブックマークをタップします。これにより、読み取りモードのないページの読みやすさが向上します。注:上記のブックマークレットをコピーしてアドレスバーに直接貼り付けると、ブラウザーが
javascript:
プレフィックスを削除することに気付くでしょう。これはブラウザーのセキュリティ機能であるため、アドレスバーから直接ブックマークレットをテストする場合は、javascript:
jsコードの前に手動で追加する必要があります。
クロム拡張機能を探している場合は、CSS列をクリックしてすべてのCSSとスタイルを無効にするuMatrixと、CSSタブの下に[ すべてのスタイルを無効にする]オプションがあるWeb Developerがあります。
そのためにWeb Developer拡張機能を使用できます。
No Styleの Chromeバージョンはありません(まだ?)ので、スタイルを無効にできる他の拡張機能など、別の方法を使用する必要があります。
[ スタイルシートを無効にする]拡張機能を使用してスタイルシート全般を無効にするか、Web Developer拡張機能を使用してすべてのスタイルのオンとオフを切り替えることができます。Penduleもこの目的のための一般的な拡張機能です。
Developers Tools [1] [2]でスタイルを無効にすることもできます。
歯車アイコン-> CSSタブ->すべてのスタイルを無効にする
あなたが速度の理由でこれをしているなら、私は代替案を提案できます:リンク2
ブラウザが開いたら、押しgて行きたいURLを入力します。このブラウザは、サポートしている標準には軽いですが、非常に古いPCでも驚くほど高速です。
Firefoxでは、[表示]-> [ページスタイル]-> [スタイルなし]を使用すると、スタイルのないページを表示できます。過度にJS /スタイルシートに依存するサイト(例:Lifehacker)に役立ちます。GoogleのChromeに同様の機能はありますか、および/またはどこからアクセスできますか?バージョン19.0.1084.56 / Ubuntu。-エドワード・モルビウス博士
...
はい。現在のセッションでスタイルシートをオフに切り替えるだけで十分です。すべてのサイトでCSS、JS、Cookieなどを切り替えるのは簡単です。残念ながら、それが起こっていたようです。私はその経験を「穏やかに迷惑な」ものとして説明します。-エドワード・モルビウス博士
console
(Chromium / Chrome、Firefox、Opera)のjQueryライブラリを使用して、HTMLドキュメントから作成者スタイルをクリアする必要があります。
(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()
https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js
HTMLドキュメントでスタイルのオンとオフを切り替えるには、これが役立つ場合があります。
https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js
ローカルファイルまたはjQueryのCDNからドキュメントにjQueryをロードし、成功をログに記録し、スタイルステータスをログに記録し、スペースバーキーダウンまたはコンソールで作成者スタイルをオンまたはオフに切り替えます。
ローカルおよびオンラインの両方のHTMLドキュメントについて、Chromium / Chrome、Firefox、およびOperaでテスト済み。
現在私が好んで使用しているツールはuMatrixブラウザー拡張機能です。これにより、現在のWebサイトと比較してドメインをロードすることにより、CSS、JS、画像、またはその他の機能を無効にすることができます。変更は簡単に切り替えたり、永続的にしたり、デフォルトのルールとしてキャストしたりできます。
このスタイリッシュな機能は、読者としてのカスタマイズのほとんどのニーズに対応します。Reader-Mode(Firefox)は、均一なスタイルのコンテンツをかなり確実に提供する傾向があります。
質問の拡張:Chrome / Androidでは実行可能なオプションがなく、上記の解決策は機能しません。
1行のjqueryコードのみ...
jQuery("head").empty();
またはJavaScriptで使用できます
document.getElementsByTagName("head")[0].innerText="";
あなたのウェブページに移動し、ctrl + shift + iを押すと、メニュー選択コンソールが表示され、このdocument.getElementsByTagName("head")[0].innerText="";
コードを貼り付けてEnterを押す
document.getElementsByTagName("head")[0].innerText="";
コードを貼り付けて