<!DOCTYPE html> <html> <head> <title>设置一个元素是否可见</title> <meta charset="utf-8"> </head> <style type="text/css"> .tips{width:370px;background:#CCC;display:none;} </style> <script type="text/javascript"> //定义一个函数 function show_or_hide() { //通过id来获取一个元素 var objl =document.getElementById("get_p"); // 这种是行内样式的写法,形如:<p style="display:none;"></p> if(objl.style.display == 'block') objl.style.display = 'none'; else objl.style.display = 'block'; } </script> <body> <!-- 添加点击事件 --> <input type="button" value="隐藏/显示" onclick="show_or_hide()" title="可以点击我一下"> <p id="get_p" class="tips" > 从前有座山,山上有座庙,庙里有个帅哥写代码 </p> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>鼠标移入移出事件</title> <meta charset="utf-8"> </head> <style type="text/css"> #get_input{background:yellow;} </style> <script type="text/javascript"> function over_bg_color() { var obj = document.getElementById('get_input'); // 这种是行内样式的写法,形如:<p style="background:red;"></p> obj.style.background='red'; } function out_bg_color() { var obj = document.getElementById('get_input'); obj.style.background='yellow'; } </script> <body> <!-- 添加鼠标移入移出事件 --> <input id="get_input" type="button" value="隐藏/显示"onmouseover="over_bg_color()" onmouseout="out_bg_color()" > </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>二级菜单</title> <meta charset="utf-8"> <style type="text/css"> #nav{height:50px;background:red;margin:50px auto 0px;} a { float:left;width:250px;line-height:50px; text-align:center;color:#FFF;text-decoration:none; } #detailed { width:250px;height:200px;background:red; position:relative;border-top:2px solid yellow; display:none;left:0px; } </style> <script type="text/javascript"> function show_detailed(index) { var obj = document.getElementById('detailed'); // 设置元素可见 obj.style.display='block'; var move_left = 250*index-250; move_left = move_left+"px";//将结果转换成字符串 obj.style.left =move_left; } function hide_detailed() { var obj = document.getElementById('detailed'); obj.style.display='none'; } </script> </head> <body> <div id="nav"> <!-- 这种直接在行内为元素添加事件不美观,可以写在JS里面 --> <a href="#" onmouseover="show_detailed(1)"onmouseout="hide_detailed()"> 首页</a> <a href="#" onmouseover="show_detailed(2)"onmouseout="hide_detailed()">家电</a> <a href="#" onmouseover="show_detailed(3)"onmouseout="hide_detailed()">手机</a> <a href="#" onmouseover="show_detailed(4)"onmouseout="hide_detailed()">付款方式</a> <a href="#" onmouseover="show_detailed(5)"onmouseout="hide_detailed()">客服</a> </div> <div id="detailed"> <a href="#">一</a> <a href="#">二</a> <a href="#">三</a> <a href="#">四</a> </div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>改变物体外观</title> <meta charset="utf-8"> <style type="text/css"> body{padding:200px;} #change_box{width:300px;height:300px;background:#CCC;} </style> <script type="text/javascript"> function change_color(want_color) { var obj = document.getElementById('change_box'); obj.style.background = want_color; } function change_size(width_size,height_size) { var obj = document.getElementById('change_box'); obj.style.width = width_size+'px'; obj.style.height = height_size+'px'; } </script> </head> <body> <input type="button" value="变黄" onclick="change_color('yellow')"> <input type="button" value="变绿" onclick="change_color('green')"> <input type="button" value="变红" onclick="change_color('red')"> <input type="button" value="变大" onclick="change_size(500,600)"> <input type="button" value="变小" onclick="change_size(100,200)"> <div id="change_box"></div> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>JS为元素添加事件</title> <meta > <meta charset="utf-8"> </head> <body> <input id="btn1" type="button" value="按钮" onclick="abc()" /> <script type="text/javascript"> // 下面这个获取元素的代码要写在该目标 元素的下面 // 因为程序是从上到下执行的,不然的话会报错 var obtn = document.getElementById('btn1'); function abc() { alert('这是一个弹窗');//可以是单引号,也可以是双引号 } //obtn.οnclick=abc;//这种是直接在JS里面为元素添加事件的写法 //这里函数不能加括号 </script> </body> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>全选反选按钮</title> <meta charset="utf-8"> <style type="text/css"> body{padding:150px;background:#CCC;} </style> </head> <body> <input type="button" id="btn_all" value="全选"></input> <input type="button" id="btn_reversed" value="反选"></input> <input type="button" id="btn_no" value="都不选"></input> <div id="ware"> <input type="checkbox" ></input><input type="checkbox" ></input> <input type="checkbox" ></input><input type="checkbox" ></input> <input type="checkbox" ></input><input type="checkbox" ></input> </div> </body> <script type="text/javascript"> function choose_all() { var obj = document.getElementById('ware'); //从一个目标元素中再获取元素 //下面是通过html元素名字来获取,结果是数组 var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) //下面的语句类似于:<input type="checkbox" checked="true"></input> ch_b[i].checked = true; } function choose_no() { var obj = document.getElementById('ware'); var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) ch_b[i].checked = false; } function choose_reversed() { var obj = document.getElementById('ware'); var ch_b = obj.getElementsByTagName('input'); for(var i=0; i <= ch_b.length; i++) ch_b[i].checked = ( ch_b[i].checked == true )? false:true; } //我并没有直接document.getElementById('');这样获取元素 //按理说要先获取元素,再来操作,不然是不行的, //我也不知道为什么我的这段代码却可以 btn_all.onclick = choose_all; btn_no.onclick = choose_no; btn_reversed.onclick = choose_reversed; </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>选项卡</title> <meta charset="utf-8"> <style type="text/css"> body{padding:150px;} #xuan_xiang_ka{width:208px;height:350px;} .title{height:50px;} .title input{height:50px;width:50px;float:left;border:1px solid #CCC;margin-left:2px;} .active{background:#5CB85C;} #content_box{background:yellow;} #content_box div{display:none;}/*设置子元素不可见*/ </style> </head> <body> <div id="xuan_xiang_ka"> <div class="title"> <input class="active" type="button" value="新闻1"></input> <input type="button" value="新闻2"></input> <input type="button" value="新闻3"></input> <input type="button" value="新闻4"></input> </div> <div id="content_box" > <div style="display:block;"> 从前有座山1 </div> <div> 从前有座山2 </div> <div> 从前有座山3 </div> <div> 从前有座山4 </div> </div> </div> </body> <script type="text/javascript"> var an_niu = document.getElementsByTagName('input'); var temp =document.getElementById('content_box'); var wen_zhang =temp.getElementsByTagName('div'); for(var i=0; i < an_niu.length; i++) { an_niu[i].index = i;//为每个按钮添加序号 an_niu[i].onclick = function () { for(var j=0; j < an_niu.length; j++) { an_niu[j].className = '';//清除类 wen_zhang[j].style.display = 'none'; } this.className = 'active';//当前按钮添加活动类 wen_zhang[this.index].style.display ='block';//当前选项卡可见 //思路:在点击一个选项卡之前,把其他的选项卡都影藏,并清除类 //之后再为当前的选项卡添加属性 } } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>innerHTML练习</title> <meta charset="utf-8"> <style type="text/css"> body{padding:50px;} div{border:1px solid red;width:260px;height:200px;padding:20px;} </style> </head> <body> <input id="text1" type="text"></input> <input id="btn1" type="button" value="设置文字"></input> <div id="div1"> 从前有座山 </div> </body> <script type="text/javascript"> var btn1 = document.getElementById('btn1'); var text1 = document.getElementById('text1'); var div1 = document.getElementById('div1'); btn1.onclick = function () { // 让div里面的文字是text里面的文字 div1.innerHTML = text1.value; } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>月历选项卡</title> <meta charset="utf-8"> <style type="text/css"> *{margin:0px;padding:0px;} .ware{background:yellow;padding:15px 0px 15px 15px;width:285px;margin:100px auto;overflow:hidden;} .month{overflow:hidden;} span{float:left;width:80px;line-height:80px;text-align:center;font-size:16px;color:#FFF;font-weight:bold; margin-right:15px;margin-bottom:15px; background:#999;} .tips{background:red;clear:both;width:240px;padding:15px;font-weight:bold;color:#FFF;} .active{background:#FFF;color:black;} </style> </head> <body> <div class="ware"> <div class="month"> <span class="active">1</span><span>2</span><span>3</span> <span>4</span><span>5</span><span>6</span> <span>7</span><span>8</span><span>9</span> <span>10</span><span>11</span><span>12</span> </div> <div id="setText" class="tips"> </div> </div> </body> <script type="text/javascript"> var obj_month = document.getElementsByTagName('span'); var objTips = document.getElementById('setText'); var arr =[ '这个月有元旦', '我们一起过年吧', '这个月有38妇女节', '4月分有什么节日呢?', '哈哈劳动节快到了', '可惜儿童节不属于我们', '貌似有建党节吧', '这个月有建军节吧么么哒', '教师节到了,给老师一份祝福吧', '一起看阅兵式吧', '光棍节到了,有木有很伤心~', '圣诞节不是中国的~' ]; // 默认显示第一个月 objTips.innerHTML = '<p>1月活动'+'</p>'+arr[0]; for(var i=0; i < obj_month.length; i++) { obj_month[i].index = i; obj_month[i].onmousemove = function () { for(var j=0; j < obj_month.length; j++) obj_month[j].className = ''; this.className = 'active'; objTips.innerHTML = '<p>'+(this.index+1)+'月活动'+'</p>'+arr[this.index]; } } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>数组遍历</title> <meta charset="utf-8"> </head> <body> </body> <script type="text/javascript"> var colorS =['yellow','blue','green','pink','black']; for( var x in colorS)//x 是下标 { alert(colorS[x]); //alert(x); } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>属性用变量代替</title> <meta charset="utf-8"> <style type="text/css"> body{padding:400px; padding-top:200px;} #box{width:300px;height:300px;background:yellow;} </style> </head> <body> <div id="box"></div> <input type="button" value="点击我一下下~" id="btn"></input> </body> <script type="text/javascript"> var value = 'background'; var oBtn = document.getElementById('btn'); var oBox = document.getElementById('box'); oBtn.onclick = function () { oBox.style[value] = 'red'; //等同于 oBox.style.background = 'red'; } </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>根据参数个数实现相应功能</title> <meta charset="utf-8"> </head> <body> <div id="J_box" style="width:300px;height:240px;background:#CCC;margin:100px;"></div> </body> <script type="text/javascript"> var oBox = document.getElementById('J_box'); function css () { if(arguments.length == 2) alert(arguments[0].style[arguments[1]]); if(arguments.length == 3) arguments[0].style[arguments[1]] = arguments[2]; } css(oBox,'width','800px'); </script> </html> <!-- *************************************************************************************--> <!DOCTYPE html> <html> <head> <title>获取非行间样式</title> <meta charset="utf-8"> <style type="text/css"> #J_box{width:300px;height:240px;background:#CCC;margin:100px;} </style> </head> <body> <div id="J_box"></div> </body> <script type="text/javascript"> var oBox = document.getElementById('J_box'); if(oBox.currentStyle) alert(oBox.currentStyle.width);//IE else alert(getComputedStyle(oBox,false).width);//FF //采用变量的写法 alert(getComputedStyle(oBox , false)['width']); </script> </html> <script type="text/javascript"> // 函数封装 // function getStyle(obj,name) // { // if( obj.currentStyle) // return obj.currentStyle[name];//obj.currentStyle.width; // else // return getComputedStyle(obj,false)[name];//getComputedStyle(obj,false).width; // } </script>