JS改變頁(yè)面顏色源碼分享
更新時(shí)間：2018年02月24日 09:22:21 作者：彬菌
本篇文章是JS的一個(gè)網(wǎng)頁(yè)制作小技巧，應(yīng)用在很多地方，通過JS改變HTML頁(yè)面的顏色，有興趣的學(xué)習(xí)下。
我們先來看下具體的演示效果圖
以下就是完整的HTML頁(yè)面代碼，大家可以測(cè)試下。
<!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組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
js?window.addEventListener?簡(jiǎn)介
window.addEventListener是JavaScript中用于添加事件監(jiān)聽器的方法,允許在發(fā)生特定事件時(shí)執(zhí)行函數(shù),本文給大家介紹js?window.addEventListener?是什么,感興趣的朋友一起看看吧2024-09-09
我們?cè)诰帉?JS 代碼時(shí),經(jīng)常會(huì)遇到邏輯判斷復(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
用最簡(jiǎn)單的方法判斷JavaScript中this的指向(推薦)
都說 JavaScript 是一種很靈活的語(yǔ)言，這其實(shí)也可以說它是一個(gè)混亂的語(yǔ)言,下面通過本文給大家分享JavaScript中this的指向知識(shí)，感興趣的朋友一起看看吧2017-09-09
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼，對(duì)于firefox不兼容。2009-12-12
本篇文章主要介紹了理解javascript async的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
javascript實(shí)現(xiàn)可改變滾動(dòng)方向的無(wú)縫滾動(dòng)實(shí)例
無(wú)縫滾動(dòng)在制作一些圖片展示的時(shí)候還是蠻有用的，下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動(dòng)方向的無(wú)縫滾動(dòng)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
最近項(xiàng)目中遇到些字符串亂碼問題，解決后有些心得，記錄于此。2009-12-12