生活コードjavascript 12の制御を強要するラベルを選択

8280 ワード
JavaScript 生活コード テキストリンク

作成ボタン1


昼間の夜間モードを作りましょう.
<input type="button" value="night" onclick="">
<input type="button" value="day" onclick="">
ボタンを作成したら、クリックしたときに表示されるイベントonclickを書き、jsコードを入力します.

2 cssセレクタを使用してjsラベルを選択する


bodyラベルのstyleプロパティはインタラクティブに追加します
jsの構文によっては、Webブラウザにbodyタグを選択させるべきです
cssのセレクタ(ラベル、id、class)を使用してjsのラベルを選択する方法を検索します.


document.querySelector('body');
このドキュメントでは、bodyラベルのプロパティを変更しますので、bodyを挿入するだけでいいです.
document-このドキュメント
検索
Webブラウザのクエリーとして解釈できます

jsとして3 style属性を入れる


styleプロパティをjsとしてbodyラベルに挿入する方法について


document.getElementById("myH1").style;
queryselectorの代替品はここで見るのが最後ですスタイルでいいです
これを参考にして、タグにスタイルを追加しましょう.
やりたいこと.
<body style="background-color:black">
上のタグをJavaScriptとして実行させたいのですが
もう一度検索して


cssではbackground-color、jsではcが大文字であることがわかります
君がそのまま運ぶなら

ボタンを押すとbodyタグが変わります
  <body>
    <h1>WEB</h1>
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    ">
  </body>
夜間モードを完了するために背景色を変更しました.
字の色を変えればいいのですが、このとき字の色が色に変わります
上のコードをコピーして、color="white"をこれに変えればいいのです.
最初は起動していなかったので、なぜそうなったのか見てみたいのですが、colorのcを大文字に変えてから再ロードすれば!

こうしてナイトモードが完成しました!
次に、上記のコードをコピーして、デイリーモードを完了します.
  <body>
    <h1>WEB</h1>
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    ">
  </body>
Redux with React
プル要求の自動化