JavaScript を使用して Web ページに夜間モードを追加する_JavaScript のヒント

HTML CSS:

コードをコピー コードは次のとおりです:

コードをコピー コードは次のとおりです:

次に、JavaScript を使用して夜間モードを記述します:

コードをコピーします コードは次のとおりです:

<script><br>var Brightness;<br>//ディスプレイマスク<br>function cover(brightness) {<br> if (typeof(div) == 'unknown') {<br> div = document.createElement('div');<br> div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px Solid;z-index:99999;');<br> document.body.appendChild(div);<br> } else {<br> div.style.display = '';<br> }<br> div.style.outlineColor = 'rgba(0,0,0) ,' 明るさ ' )';<br>}<br>//イベントリスニング<br>window.addEventListener('keydown', function(e) {<br> if (e.altKey && e.keyCode == 90) { //Alt Z: ナイトモードをオンにする <br> cover(brightness = 0.3);<br> }<br> if (e.altKey && e.keyCode == 88) { //Alt X: cover(brightness = 0 ; <br> }<br> if (e.altKey && e.keyCode == 40) { //Alt ↓:明るさを下げる<br> if (brightness 0.05 < 0.95) cover(brightness = 0.05);<BR> } <BR>}、false);<BR></script>



GreaseMonkey スクリプトとして記述し、任意のページに夜間モードを追加するブラウザ拡張機能として使用することもできます