js Dom简单练习题
一、js Dom简单练习题
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /* #xianshi{ width: 100px; height: 100px; background-color: red; display: none; }*/ .bian{ width: 100px; height: 100px; background-color: #ccc; } .bb{ width: 200px; height: 50px; background-color: red; } #tcc{ background-color: red; display: none; width: 20px; } </style> </head> <body> <!-- 显示隐藏 <button onClick="showOther()">123</button> <div id="xianshi" ></div> --> <!--鼠标经过变窄变高变色，移出恢复 <div id="bian" class="bian"></div>--> <!-- 鼠标经过就弹出层(函数、变量) <div id="sbjg" onMouseOver="yiru(this)" onMouseOut="yichu(this)">鼠标经过就弹出层</div> <div id="tcc" >弹出层</div> --> <!-- 网页换肤 <div >网页换肤</div> <button onClick="yangshi1()">样式1</button> <button onClick="yangshi2()">样式2</button> --> <!-- <div class="divbj"> <div>点击变色</div> <button onClick="yirubh(yellow)">点击变黄</button> <button onClick="yirubl(green)">点击变绿</button> <button onClick="yirubl(black)">点击变黑</button> <button onClick="yiruhf(white)">点击恢复</button> </div> --> </body> </html> <script> ///*功能：显示隐藏div // 参数：无 // 返回值：无 //*/ //function showOther(){ // // //找到div // var xianshi = document.getElementById("xianshi"); // //获得样式 // var yinc = xianshi.style.display; // //更改样式 // if(yinc == "block"){ // xianshi.style.display = "none"; // }else{ // xianshi.style.display = "block"; // } //} /*鼠标经过变窄变高变色，移出恢复*/ //找到div //var bianhua = document.getElementById("bian"); // //bianhua.onmouseover = function(){//鼠标移入事件 // bianhua.setAttribute("class","bb"); //} //bianhua.onmouseout = function(){ //鼠标移出事件 // bianhua.setAttribute("class","bian"); //} //鼠标经过就弹出层(函数、变量) //function yiru(aa){ //鼠标移入弹出层显现 // var tcc1 = document.getElementById("tcc"); // tcc1.style.display = "block"; //} //function yichu(aa){ //鼠标移出弹出层隐藏 // var tcc1 = document.getElementById("tcc"); // tcc1.style.display = "none"; //} ////网页换肤 //function yangshi1(){ // var bb = document.getElementsByTagName("body"); //通过标签找元素 ，返回的都是数组，数组元素是元素对象 // bb[0].style.backgroundColor = "red"; //bb[0]代表里面的第一个元素，调用使用数组格式 //} //function yangshi2(){ // var bb = document.getElementsByTagName("body"); //通过标签找元素 ，返回的都是数组，数组元素是元素对象 // bb[0].style.backgroundColor = "green"; //} </script>
