<!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>

js控制div是否显示的更多相关文章

  1. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  4. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  5. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  6. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  7. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  8. js控制select选中显示不同表单内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 简简单单，jquery中，使用checkbox控制div的显示与隐藏

    今天开发代码时,发现好久不用jquery就生疏了. 所以作这个记录, 使用checkbox控制div的显示与隐藏. 一,html代码处: <input type="checkbox&q ...

随机推荐

  1. 已有a,b两个链表，每个链表中的结点包括学号、成绩。要求把两个链表合并，按学号升序排列

    1.我的思路先将b链表连接在a链表的后面,这个很容易实现,将a链表最后的结点中的p.next改为指向b链表的头结点即可. 再将这个新链表用选择排序即可. 代码如下: #include<stdio ...

  2. Java对象初始化详解

    在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一点是Java规范规定的.本文试图对Java如何执行对象的初始化做一个详细深入地介绍(与对象初始化相同,类在被加载之后也是需要初始化的,本 ...

  3. Android线程消息通信（二）

    创建线程消息队列 Android应用程序的消息队列是使用一个MessageQueue对象来描述的,它可以通过调用Looper类的静态成员函数prepareMainLooper或者prepare来创建, ...

  4. Mybatis批量插入oracle,mysql

    oracle  <insert id="addUserData" parameterType="java.util.List"> INSERT IN ...

  5. c# 委托 和 事件

    当初学C#的时候,没有完全吃透的,只能现在继续了...  欠老账.... http://www.cnblogs.com/chengxingliang/archive/2013/05/21/305191 ...

  6. vim不保存退出

    对于刚开始使用vi/vim文本编辑器的新手来说,如何在不保存更改而退出vi/vim 文本编辑器呢? 当你使用linux vi/vim 文本编辑器对linux下某个配置文件做编辑操作,当你更改完之后,可 ...

  7. PHP页面跳转几种实现技巧

    PHP被许多程序员用来开发WEB的首选语言.在实际开发中,网站的各项功能都可以通过PHP语言的编写来满足,比如PHP页面跳转这一方法. 探讨PHP变量解析顺序如何获取提交数据 深入解读PHP运行机制 ...

  8. JLINK V8 升级5.12E 在MDK5.20不变砖

    转载:只是用了新的固件,步骤跟原子提供的方法 是一模一样的.这边也把步骤写了上来. 使用 SAM-PROG 更新 JLINK 固件一 :安装软件 安装 Install AT91-ISP v1.13.e ...

  9. 研究CPU的好文章以及博客

    留个爪,有空仔细看: http://blog.csdn.net/zhangxinrun/article/details/6918862 http://blog.csdn.net/gaijf/artic ...

  10. iOS tintColor解析

    在UIView中一个相对来说比较小的属性,tintColor属性是相当的强大.今天我们就来看看如何使用他,包含使用tint color进行着色标准控件.我们自定义控件甚至重新着色图像. 本章的实例程序 ...