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)文章
大家都知道js是單線程的，執(zhí)行起來是順序的，在順序的業(yè)務(wù)邏輯中當(dāng)然沒有問題，如果遇到可以并發(fā)執(zhí)行的業(yè)務(wù)邏輯，再排隊(duì)就很低級了！所以這里我們再來簡單的談?wù)凧S中的異步以及如何異步。2016-08-08
使用canvas實(shí)現(xiàn)鯉魚躍龍門的動畫效果
這篇文章主要給大家介紹了使用canvas實(shí)現(xiàn)鯉魚躍龍門的動畫效果,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動手嘗試一下2024-02-02
JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法,詳細(xì)分析了彈出遮罩層效果的實(shí)現(xiàn)方法以及完整的實(shí)例代碼,需要的朋友可以參考下2014-12-12
這篇文章介紹了js全屏顯示顯示代碼的三種方法，有需要的朋友可以參考一下2013-11-11
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2024-02-02
javascript實(shí)現(xiàn)最長公共子序列實(shí)例代碼
最長公共子序列（longest common sequence）和最長公共子串（longest common substring）不是一回事兒，下面這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)最長公共子序列的相關(guān)資料，需要的朋友可以參考下。2018-02-02
這篇文章給大家介紹IE6兼容透明背景圖片以及在IE6中的透明圖片不是透明顯示的解決方案,有需要的朋友可以參考下2015-08-08
本文介紹了JavaScript中的this關(guān)鍵字在各種情況下的含義，實(shí)例都很簡單，這樣更能有助于加深理解。雖然這只是js中一個(gè)很小的概念，但借此我們可以了解js中函數(shù)的執(zhí)行環(huán)境，充分掌握this的相關(guān)知識有助于我們在編寫面向?qū)ο蟮腏avaScript程序時(shí)能夠游刃有余。2016-12-12
這篇文章主要介紹了Uniapp中使用Echarts的示例詳解這里只舉例折線圖，介紹了uni-app微信小程序使用echarts的方法,下載echart組件，可以先隨便建個(gè)文件夾，然后 npm init，接著下載依賴，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了javascript簡易畫板開發(fā)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10