css部分
html,body{
width:100%;
height:100%;
}
html部分
<input type="button"value="點(diǎn)我變紅"
onclick="document.body.style.background='red'">
<input type="button"value="點(diǎn)我變綠"
onclick="document.body.style.background='green'">
<input type="button"value="點(diǎn)我變黃"
onclick="document.body.style.background='yellow'">
<input type="button"value="點(diǎn)我變藍(lán)"
onclick="document.body.style.background='blue'">
注釋內(nèi)容
- input是一個(gè)標(biāo)簽胸蛛，type="button"指它是一個(gè)按鈕缴啡，value是這個(gè)按鈕的內(nèi)容
- onclick是點(diǎn)擊阶冈，點(diǎn)擊后會(huì)執(zhí)行后面的代碼
- style是樣式解藻，background是背景
版本二（函數(shù)式寫法）
css部分
html,body{
width:100%;
height:100%;
}
HTML部分
<button id="redBtn">紅色</button>
JS部分
var redBtn=document.getElementById("redBtn");
redBtn.onclick = function (){
document.body.style.background ="red"
}
注釋內(nèi)容
- var redBtn 是聲明一個(gè)變量孝治，相當(dāng)于給按鈕起個(gè)名字存起來
- 我們把要執(zhí)行的代碼放在function中存起來
- 當(dāng)我們點(diǎn)擊這個(gè)按鈕的時(shí)候损痰，才會(huì)執(zhí)行function中的代碼
