css部分
html,body{
width:100%;
height:100%;
}
html部分
<input type="button" value="點我變紅">
onclick="document.body.style.background='red'"
<input type="button" value="點我變綠">
onclick="document.body.style.background='green'"
<input type="button" value="點我變黑">
onclick="document.body.style.background='black'"
注釋內(nèi)容
- inuput是一個標(biāo)簽,type="button"值它是一個按鈕薇搁,value是這個按鈕的內(nèi)容
- oncilk是點擊,點擊執(zhí)行后悔執(zhí)性后邊的代碼
- style是樣式屡拨,background是背景
版本二(函數(shù)式寫法)
css部分
html.body{
width:100%
height:100%;
}
html
<button id="redBtn">紅色</button>
JS部分
var redBtn = document.getElementByld("redBtn");
redBtn.onclick = function(){
document.body.style.background="red"
}
注釋內(nèi)容
- var redBtn 是聲明一個變量只酥,相當(dāng)于給按鈕起個名字存起來
- 我們把要執(zhí)行的代碼放在function中存起來
- 當(dāng)我們點擊這個按鈕有的時候褥实,才會執(zhí)行function中的代碼