cari

Rumah >hujung hadapan web >tutorial js >在JS中如何改变页面颜色（详细教程）

在JS中如何改变页面颜色（详细教程）

亚连
亚连asal
2018-06-04 17:26:204749semak imbas

本篇文章是JS的一个网页制作小技巧，应用在很多地方，通过JS改变HTML页面的颜色，有兴趣的学习下。

我们先来看下具体的演示效果图

以下就是完整的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>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何使用ngrok+express解决微信接口调试问题

如何使用element-ui表格实现单元格可编辑

如何使用vue-cli编写vue插件

Atas ialah kandungan terperinci 在JS中如何改变页面颜色（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS框架库使用案例详解Artikel seterusnya：怎样使用原生js做出满天星效果

Artikel berkaitan

Lihat lagi