<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,ul,li{ padding:0; margin:0} li { list-style:none; } .lis { width:80px; height:30px; border:1px solid #333; position:relative; margin-left:50px; } .lis a { display:block; line-height:30px; text-align:center; text-decoration:none; color:#000; background:#f1f1f1; } ul ul { padding:0; margin:0; width:800px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FF9; display:none;} ul ul li { text-align:center; line-height:30px; } </style> </head> <body> <ul> <li id="lis" class="lis"> <a id="link" href="#">微博</a> <ul id="ul1"> <li>私信</li> <li>评论</li> <li>@我</li> </ul> </li> </ul> <p>我在这里不动，但上面会把我遮住</p> <script> var li = document.getElementById('lis'); var ul = document.getElementById('ul1'); var a = document.getElementById('link'); li.onmouseover = show; li.onmouseout = hide; function show(){ ul.style.display = 'block'; a.style.background = 'yellow'; } function hide(){ ul.style.display = 'none'; a.style.background = '#f1f1f1'; } </script> </body> </html>
希望把某个元素移除你的视线：
1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width height
4、透明度
5、left top
6、拿一个白色DIV盖住它
7、margin负值
……
JS中如何获取元素：
1、通过ID名称来获取元素：
document get element by id 'link'
docuemnt.getElementById('link');
2
……
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
……
onload 加载完以后执行……
window.onload = 事情
img.onload
body.onload
……
如何添加事件：
元素.onmouseover
函数：可以理解为-命令，做一些事~~
function abc(){ // 肯定不会主动执行的！
……
}
1、直接调用：abc();
2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
测试：
alert(1); 带一个确定按钮的警告框
alert('ok'); 'ok' 字符串
alert("ok");
变量：
var li = document.getElementById('lis');
var num = 123;
var name = 'leo';
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:200px; height:200px; background:red; display:none; } </style> <script> window.onload = function (){ var oBtn1 = document.getElementById('show_btn'); var oBtn2 = document.getElementById('hide_btn'); var oDiv = document.getElementById('div1'); var oStrong = document.getElementById('strong1'); oStrong.onclick = show; oBtn1.onclick = show; function show(){ oDiv.style.display = 'block'; oDiv.style.width = '300px'; oDiv.style.background = 'yellow'; } oBtn2.onclick = function (){ oDiv.style.display = 'none'; }; }; </script> </head> <body> <input id="show_btn" type="button" value="显示" /> <input id="hide_btn" type="button" value="隐藏" /> <strong id="strong1">我也要让它显示~~</strong> <div id="div1"></div> </body> </html>
练习：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,p{ padding:0; margin:0;} #main{ width:700px; height:500px; background:#ccc; position:relative;} .title{ font-size:24px; font-weight:bold; padding:20px 0 0 20px;}/*这里设置的是p标签的内边距，外面的的父元素div是不用减去相应的像素的*/ .title span{ display:inline-block; background:red; width:130px; height:50px; text-align:center; line-height:50px;}/*这里设置高度，并且设置行高使其垂直居中，同级元素也会跟着变动*/ .box{ width:100px; height:100px; border:2px solid #000; margin:20px 0 0 20px;} .set{ width:300px; height:250px; border:10px solid #000; position:absolute; bottom:10px; right:10px; display:none;} .one,.two,.three{ padding:20px 0 0 20px;} .one span,.two span,.three span{ display:inline-block; margin-right:15px;} #red,#yellow,#blue,#yibai,#liangbai,#sanbai{width:30px; height:30px; text-align:center; line-height:30px;} #red{ background:red;} #yellow{ background:yellow;} #blue{ background:blue;} #yibai,#liangbai,#sanbai{ background:pink;} .btn{ margin-top:20px; text-align:center; } .btn span{ display:inline-block; width:80px; height:40px; background:blue; margin-right:10px; text-align:center; line-height:40px; color:#fff;} </style> </head> <body> <div id="main"> <p class="title">请为下面的div设置样式：<span id="btn">点击设置</span></p> <div class="box" title="妙味课堂 - 高清视频集合 - www.miaov.com" id="box"><!--title是一个元素的属性可以加到任何的元素中，表示当鼠标移动到元素上是，会出现提示--> </div> <div class="set" id="set_show"> <p class="one"><span>请选择背景颜色：</span><span id="red">红</span><span id="yellow">黄</span><span id="blue">蓝</span></p> <p class="two"><span>请选择宽度(px)：</span><span id="yibai">100</span><span id="liangbai">200</span><span id="sanbai">300</span></p> <p class="three"><span>请选择高度(px)：</span><span id="yibai">100</span><span id="liangbai">200</span><span id="sanbai">300</span></p> <p class="btn"><span>恢复</span><span>确定</span></p> </div> </div> </body> </html> <script> var btn = document.getElementById("btn"); var set = document.getElementById("set_show"); var red = document.getElementById("red"); var yellow = document.getElementById("yellow"); var blue = document.getElementById("blue"); var box = document.getElementById("box"); btn.onclick =function(){ set.style.display = "block"; } red.onclick=function(){ box.style.backgroundColor="red"; } yellow.onclick=function(){ box.style.backgroundColor="yellow"; } blue.onclick=function(){ box.style.backgroundColor="blue"; } /*下面设置长宽高同理，按照这样的方法进行设置*/ </script>