javaScriptWebAPI-02
Posted huasongweb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScriptWebAPI-02相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascriptAPI03</title> 6 <style> 7 #div01{ 8 width: 200px; 9 height: 200px; 10 } 11 12 .news{ 13 width: 400px; 14 height: 300px; 15 border: 1px solid grey; 16 } 17 #hd{ 18 width: 380px; 19 height: 70px; 20 21 display: flex; 22 } 23 #hd span{ 24 display: block; 25 height: 70px; 26 flex:1; 27 background-color: pink; 28 line-height: 70px; 29 text-align: center; 30 } 31 #hd span:nth-child(1){ 32 33 margin-left: 10px; 34 35 } 36 37 38 #bd{ 39 position: relative; 40 width: 370px; 41 height: 220px; 42 left: 10px; 43 } 44 #bd div{ 45 width: 370px; 46 height: 220px; 47 background-color: pink; 48 position: absolute; 49 } 50 .hidden{ 51 display: none; 52 } 53 .show{ 54 display: block; 55 56 } 57 </style> 58 </head> 59 <body> 60 61 <div id="div01"></div> 62 63 <input type="button" value="关灯" id="btn01"> 64 65 <div class="news"> 66 <div id="hd"> 67 <span>体育</span> 68 <span>娱乐</span> 69 <span>新闻</span> 70 <span>综合</span> 71 </div> 72 73 <div id="bd"> 74 <div>我是体育模块</div> 75 <div>我是娱乐模块</div> 76 <div>我是新闻模块</div> 77 <div>我是综合模块</div> 78 </div> 79 </div> 80 81 <script > 82 //样式操作 83 function myCls$(id){ 84 return document.getElementsByClassName(id); 85 } 86 function my$(id){// 函数封装获取id 87 return document.getElementById(id); 88 } 89 function myTag$(id){// 函数封装获取id 90 return document.getElementsByTagName(id); 91 } 92 // console.log(typeof(my$())); //Nunber 93 94 console.log(my$("div01").style); //全是CSS属性,值都是字符串 95 96 my$("div01").style.backgroundColor = "red"; 97 98 99 //开关灯操作 100 var off = false; 101 my$("btn01").onclick = function() { 102 if (off == false){ 103 104 // console.log(myTag$("body")[0].style); 105 myTag$("body")[0].style.backgroundColor = "black"; 106 107 108 console.log(myTag$("body")); 109 off = true; 110 this.value = "开灯"; 111 112 } 113 else{ 114 myTag$("body")[0].style.backgroundColor = "white"; 115 off = false; 116 this.value = "关灯"; 117 118 } 119 } 120 121 //新事件 :当鼠标移入 onmouseover 122 // 当鼠标移出 onmouseout 123 // 获得了焦点 onfocus 124 // 失去了焦点 125 126 127 //综合模块切换高亮显示 128 129 var hd =my$("hd"); 130 var bd =my$("bd"); 131 // console.log(hd); 132 var spans = hd.getElementsByTagName("span"); 133 var divs = bd.getElementsByTagName("div"); 134 // console.log(divs[1]); 135 136 137 // console.log(spans); 138 139 //上头的各个模块高亮显示 140 141 142 143 var fn = function(){ 144 oldColor = this.style.backgroundColor; 145 this.style.backgroundColor = "grey"; 146 var index = this.getAttribute("index"); 147 var nIndex = Number(index); 148 149 for(var i = 0;i<divs.length;i++){ 150 if(i == nIndex){ 151 divs[i].className = "show"; 152 } 153 else{ 154 divs[i].className = "hidden"; 155 divs[i].style.backgroundColor = "grey"; 156 } 157 } 158 159 } 160 161 var fn1 = function(){ 162 163 this.style.backgroundColor = oldColor; 164 console.log(this.style.backgroundColor); 165 } 166 167 for(var i = 0;i<spans.length;i++){//啊哈 168 169 170 divs[i].className = "hidden"; 171 // spans[i].onmouseover = function(){ 172 173 // this.style.backgroundColor = "blue"; 174 // } 175 176 spans[i].setAttribute("index",i);//给spans设置一个自定义的值,然后留着给div用,这个div是显示的,其他的div会隐藏 177 178 spans[i].onmouseover = fn;// 其中,fn中的this等于fn.而fn又等于spans[i], 179 180 spans[i].onmouseout = fn1; 181 } 182 console.log(divs.length); 183 184 185 </script> 186 </body> 187 </html>
以上是关于javaScriptWebAPI-02的主要内容，如果未能解决你的问题，请参考以下文章