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>