点击事件—弹窗

  1. <button type="button" onclick="alert('欢迎!')>点我</button>

改变HTML的内容

教程地址

改变原来的内容，或者盖上一层东西

  1. <script>
  2. function myFunction()
  3. {   //myFunction（）点击的事件名
  4.     x=document.getElementById("some id");  // 找到元素 替换元素的的位置
  5.     x.innerHTML="输入要改变的内容";    // 改变内容
  6. }
  7. </script>
  8. <button type="button" onclick="myFunction()">点击这里</button>

改变HTML图像，点亮灯泡

点亮灯泡

改变HTML样式

改变文字颜色

以上两个结合，来回点击改变样式

  1.    function color(){
  2.    x=document.getElementById("a");
  4.        if (x.style.color.match("blue"))
  5.        //x.style.color.match("blue")检索样式中有没有blue字符串，若有则样式更新为red,反之
  6.    {
  7.        x.style.color="red";
  8.    }
  9.    else
  10.    {
  11.        x.style.color="blue";
  12.    }
  13.    }
  14.    </script>
  15.    <p id="a" style="color:blue; " >change color</p>
  16.    <button  onclick="color()"> 点击</button>