03JavaScript程序设计修炼之道 2019-06-20_20-51-20

本是古典何须时尚 2021-12-11 04:34 194阅读 0赞

8attribute.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .show {
         
                display: block;
            }
            .hide {
         
                display: none;
            }
        </style>
    </head>
    <body>
         <img src="img/1.jpeg" class="demo" id="img" alt=""><br />
         <button id="show">显示</button>
         <button id="hide">隐藏</button>
         <div></div>
         <script>
             //非表单元素 src  style  className  href  title
             document.getElementsByTagName("img")[0].onmouseover = function() {
                console.dir(this); 
                this.src = "img/2.jpg";
             }
             document.getElementsByTagName("img")[0].onmouseout = function() {
                 this.src = "img/1.jpeg";
             }
    
             // 给div设置样式
             document.querySelector("div").style.width = "200px";
             document.querySelector("div").style.height = "200px";
             document.querySelector("div").style.background = "pink";
             var btn_show = document.querySelector("#show");
             var btn_hide = document.querySelector("#hide");
             btn_show.onclick = function() {
                document.querySelector("div").className = "show";
             }
             btn_hide.onclick = function() {
                document.querySelector("div").className = "hide";
             }
        </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/HiJackykun/p/11093824.html