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="點我變藍(lán)"
onclick="document.body.style.background='blue'">
<input type="button"value="點我變白"
onclick="document.body.style.background='#fff'">
<input type="button"value="點我變黑"
onclick="document.body.style.background='rgd(0党觅,0,0)'">
注釋內(nèi)容
- input是一個標(biāo)簽,type="button"指它是一個按鈕丛晦,value是這個按鈕的內(nèi)容
- onclick是點擊蜀漆,點擊后執(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中存起來
- 我們點擊這個按鈕的時候,才會執(zhí)行function中的代碼