Javascript实现DIV的隐藏和出现

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>oec2003</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

    if (document.getElementById){

        target=document.getElementById(targetid);

            if (target.style.display=="block"){

                target.style.display="none";

            } else {

                target.style.display="block";

            }

    }

}

-->

</script>

<style type="text/css">

<!--

#div1{

background-color:#000000;

height:400px;

width:400px;

display:none;

}

-->

</style>

</head>

<body>

<input type="button" id="butn" value="显示/隐藏" onclick="toggle(‘div1‘)" />

<center>

<div id="div1"></div></center>

居中的DIV

</body>

</html>

时间： 2024-10-25 01:47:36

Javascript实现DIV的隐藏和出现的相关文章

点击同一按钮实现div的隐藏与现实切换

点击同一按钮实现div的隐藏与现实切换:在很多应用中,都有这样的功能,点击同一个按钮可以实现div的隐藏或者现实,当然操作的并非必须是按钮或者div,不过原理是一样的,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

判断div是否隐藏

点击按钮对两个div的隐藏与显示进行切换

HTML: <button type="button" id="showHidden">点击切换div的隐藏与显示</button> <div id="div1">请叫我第一层</div> <div id="div2">请叫我第二层</div> JS: <script type='text/javascript'> function show

JavaScript 创建DIV 设置样式不起作用，很多都是因为设置样式的顺序问题

JavaScript 创建DIV 设置样式不起作用,很多都是因为设置样式的顺序问题,因为有的样式需要之前设置其他样式才能生效,推荐的样式排序如下: insertDIV:function(){ var divId=document.getElementById("divContainer"); if(divId){ divId.style.display="block"; //作用:一般这种需要设置退出时候就消失了,可以设置display为none隐藏,那么再添加

jquery点击非div区域隐藏div

点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class="per_c"> <div class="person-msg pull-right"> <img src="../../res/images/snow_man.jpg"> </div> <dl class=

2017.9.24 基于HTML+JavaScript+CSS的开发案例&&JavaScript+CSS+DIV实现表格变色

1.JavaScript+CSS+DIV实现下拉菜单 1.1 层标签<div> 基本语法: <div id="层编号" style="position:absoult;left:29px;top:12px; width:200px;henght:100px;background-color:#33CC99; float:none;clear:none;z-index:1"> </div> 语法说明: ·position属性主要是来

点击div外面隐藏弹窗

//点击div外面隐藏弹窗function click_out_div(){ $(document).bind("click",function(e){ var target = $(e.target); if(target.closest("#select_div").length == 0){//点击div之外的地方触发 $("#select_div").hide(); } });}

css talbe中td溢出隐藏 div溢出隐藏

td溢出隐藏 1 table{ 2 width:100px; 3 table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ 4 } 5 td{ 6 width:100%; 7 word-break:keep-all;/* 不换行 */ 8 white-space:nowrap;/* 不换行 */ 9 overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 10 text-overflow:ellipsis;/* 当对

利用div显示隐藏实现的分页效果

实现步骤: 1.创建对应切换div <div class="bottom_daohang"> <div class="bottom_daohang_zong"> <div class="bottom_daohang_left value_left ace"><</div> <div id="bianse1" class="bottom_daohang_num