ホームページ  >  記事  >  ウェブフロントエンド  >  JSで現在のページの色を変更する方法

JSで現在のページの色を変更する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-17 14:31:262415ブラウズ

今回はJSで現在のページの色を変更する方法を紹介します。 JSを使用して現在のページの色を変更する場合の注意点を実際に見てみましょう。

最初に具体的なデモのレンダリングを見てみましょう

以下は完全な HTML ページ コードです。テストできます。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <style> 
    .big_box{ 
      width: 500px; 
      height: 500px; 
      border: 1px solid black; 
    } 
    .big_box input{ 
      margin-left: 60px; 
    } 
  </style> 
  <script> 
    function Change_red(){ 
      var Red=document.getElementById("change_style"); 
      Red.style.backgroundColor="red"; 
    } 
    function Change_blue(){ 
      var Blue=document.getElementById("change_style"); 
      Blue.style.backgroundColor="blue"; 
    } 
    function Change_green(){ 
      var Green=document.getElementById("change_style"); 
      Green.style.backgroundColor="green"; 
    } 
  </script> 
</head> 
<body> 
  <p class="big_box" id="change_style"> 
    <input type="button" value="变为红色" onclick="Change_red()"> 
    <input type="button" value="变为蓝色" onclick="Change_blue()"> 
    <input type="button" value="变为绿色" onclick="Change_green()"> 
  </p> 
</body> 
</html>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js でラベルを動的に作成し、属性を設定する方法

JS を使用して計算を行う

JS で Array filter() メソッドを使用する方法

以上がJSで現在のページの色を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。