JS改變頁面顏色源碼分享

更新時(shí)間：2018年02月24日 09:22:21 作者：彬菌

本篇文章是JS的一個(gè)網(wǎng)頁制作小技巧，應(yīng)用在很多地方，通過JS改變HTML頁面的顏色，有興趣的學(xué)習(xí)下。

我們先來看下具體的演示效果圖

以下就是完整的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> 
  <div class="big_box" id="change_style"> 
    <input type="button" value="變?yōu)榧t色" onclick="Change_red()"> 
    <input type="button" value="變?yōu)樗{(lán)色" onclick="Change_blue()"> 
    <input type="button" value="變?yōu)榫G色" onclick="Change_green()"> 
  </div> 
</body> 
</html>

相關(guān)文章

如何使用bootstrap框架 bootstrap入門必看!
如何使用bootstrap？這篇文章就是告訴大家如何使用bootstrap框架，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
微信小程序checkbox組件使用詳解
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
js?window.addEventListener?簡介
window.addEventListener是JavaScript中用于添加事件監(jiān)聽器的方法,允許在發(fā)生特定事件時(shí)執(zhí)行函數(shù),本文給大家介紹js?window.addEventListener?是什么,感興趣的朋友一起看看吧
2024-09-09
JavaScript如何優(yōu)化邏輯判斷代碼詳解
我們在編寫 JS 代碼時(shí),經(jīng)常會遇到邏輯判斷復(fù)雜的情況,這篇文章主要給大家介紹了關(guān)于JavaScript如何優(yōu)化邏輯判斷代碼的相關(guān)資料,需要的朋友可以參考下
2021-06-06
js實(shí)現(xiàn)拾色器插件（ColorPicker）
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拾色器插件ColorPicker，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
用最簡單的方法判斷JavaScript中this的指向(推薦)
都說 JavaScript 是一種很靈活的語言，這其實(shí)也可以說它是一個(gè)混亂的語言,下面通過本文給大家分享JavaScript中this的指向知識，感興趣的朋友一起看看吧
2017-09-09
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼，對于firefox不兼容。
2009-12-12
理解javascript async的用法
本篇文章主要介紹了理解javascript async的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
javascript實(shí)現(xiàn)可改變滾動(dòng)方向的無縫滾動(dòng)實(shí)例
無縫滾動(dòng)在制作一些圖片展示的時(shí)候還是蠻有用的，下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動(dòng)方向的無縫滾動(dòng)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
JavaScript中出現(xiàn)亂碼的處理心得
最近項(xiàng)目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。
2009-12-12