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>

练习：

<!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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/LO-ME/p/3890468.html