Heim > Web-Frontend > js-Tutorial > JS implementiert Code zum Ändern der Seitenfarbe

JS implementiert Code zum Ändern der Seitenfarbe

小云云
Freigeben: 2018-02-26 09:18:33
Original
1725 Leute haben es durchsucht

In diesem Artikel erhalten Sie einen kleinen Tipp zur Erstellung von JS-Webseiten, der an vielen Stellen verwendet wird. Sie können die Farbe der HTML-Seite über JS ändern. Ich hoffe, dass dies allen helfen kann.

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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJS implementiert Code zum Ändern der Seitenfarbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage