首页 > 代码库 > js控制div是否显示
js控制div是否显示
<!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>
