版本一(js行內(nèi)式寫法)
css部分
html,body{
height: 100%;
width: 100%;
}
html部分
<input type="button" value=" 點我變藍" onclick="document.body.style.background='blue'">
<input type="button" value="點我變紅" onclick="document.body.style.background='red'">
<input type="button" value="點我變黃" onclick="document.body.style.background='yellow'">
注釋內(nèi)容
- input是一個標(biāo)簽,tybe="button"指他是一個按鈕勤晚,value是這個按鈕的內(nèi)容
- onclick是點擊,點擊執(zhí)行后面的代碼
- style是樣式,background是背景yanse
版本二(js行內(nèi)式寫法)
css部分
html,body{
height: 100%;
width: 100%;
}
html部分
<button id="ben">按鈕</button>
js部分
var redben=document.getElementById("ben"):
onclick=function(){
document.body.style.background = "red";
}
注釋內(nèi)容
- var redben 是聲明一個變量砚作,相當(dāng)于給按鈕起個名字存起來
- 我們把要執(zhí)行的代碼放在function中存起來
- 當(dāng)我們點擊按鈕的時候,才會執(zhí)行function中的代碼