前端开发之JavaScript HTML DOM实战篇

实战案例一：

　　“灯泡发光”　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javaScript案例之点亮灯泡</title>
    <style type="text/css">
        img{
            width:100px;
            height:180px;
            margin:50px 50%;
        }

    </style>
</head>
<body>
    <img id="myLight" onclick="changeImage()" src="images/pic_bulboff.gif" title="点击灯泡发光或关闭" >
    <script>
        function changeImage(){
            element = document.getElementById("myLight");
            if(element.src.match('bulbon')){
                element.src="images/pic_bulboff.gif";
            } else{
                element.src="images/pic_bulbon.gif";
            }
        }
    </script>
</body>
</html>

View Code