js点击变色小案例

版本一（js行内式写法）

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

注释内容

• input是一个标签，tybe="button"指他是一个按钮，value是这个按钮的内容
• onclick是点击，点击执行后面的代码
• style是样式，background是背景yanse

版本二（js行内式写法）

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

注释内容

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