suchen

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

JS implementiert Code zum Ändern der Seitenfarbe

小云云
小云云Original
2018-02-26 09:18:331699Durchsuche

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>

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!

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：Häufig verwendete Meldungsfelder in JSNächster Artikel：Häufig verwendete Meldungsfelder in JS

In Verbindung stehende Artikel

Mehr sehen