JS点击变色小案例

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'"

注释内容

• inuput是一个标签，type="button"值它是一个按钮，value是这个按钮的内容
• oncilk是点击，点击执行后悔执性后边的代码
• style是样式，background是背景

版本二（函数式写法）

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"
}

注释内容

• var redBtn 是声明一个变量，相当于给按钮起个名字存起来
• 我们把要执行的代码放在function中存起来
• 当我们点击这个按钮有的时候，才会执行function中的代码