Heim > Artikel > Web-Frontend > So ändern Sie die Seitenfarbe in JS (ausführliches Tutorial)

So ändern Sie die Seitenfarbe in JS (ausführliches Tutorial)

亚连Original: 2018-06-04 17:26:204711Durchsuche

Dieser Artikel ist eine kleine Fähigkeit zur Webseitenerstellung mit JS. Sie kann die Farbe von HTML-Seiten über JS ändern.

Werfen wir zunächst einen Blick auf die spezifischen Demonstrations-Renderings

Das Folgende ist der vollständige HTML-Seitencode, den Sie testen können.

<!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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie ngrok+express, um Debugging-Probleme der WeChat-Schnittstelle zu lösen

So verwenden Sie Element-UI-Tabellen, um Zellfunktionalität implementieren Bearbeiten

So verwenden Sie vue-cli, um ein Vue-Plug-in zu schreiben

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Seitenfarbe in JS (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Anwendungsfälle der JS-Framework-BibliothekNächster Artikel：Detaillierte Erläuterung der Anwendungsfälle der JS-Framework-Bibliothek

In Verbindung stehende Artikel

Mehr sehen