hc学习平台

 找回密码
 立即注册
搜索
热搜: 活动 交友 javakc
 › 学习交流 › JavaScript › 如何显示/隐藏一个DOM元素
查看: 2741|回复: 7
打印 上一主题 下一主题

如何显示/隐藏一个DOM元素

[复制链接]

2249

主题

0

帖子

0

博客

admin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

跳转到指定楼层
楼主
发表于2015-01-21 14:46:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

957

帖子

2

博客

zxjc

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-20 09:21:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<head>
</head>
<script>
	function fun(){
		document.getElementById("txt").style.display="none";  //设置样式消失
	}
	function fun2(){
		document.getElementById("txt").style.display="block"; //设置样式出现
	}

</script>
<body>
	<input type = "text" name = "txt" id  ="txt">
	<div id = "info"></div>
	<input type = "button" name = "btn" value = "消失" onclick = "fun();">
	<input type = "button" name = "btn2" value = "出现" onclick = "fun2()">
</body>
结果:
 

0

主题

535

帖子

2

博客

wenjianrui

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-25 20:25:11 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

显示: document.getElementById('element').style.d="",

隐藏 : document.getElementById('element').style.d='none'

0

主题

856

帖子

2

博客

bnlnk

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-28 15:16:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<script>
 function fun(){  
  document.getElementById("d1").style.display="none"; 
 } 
 function fun1(){  
  document.getElementById("d1").style.display="block"; 
 } 
</script>
<body>
 <div id="d1">
  <input type="button" id="b1" onclick="fun()" value="按钮">
  <input id="t1">
 </div>
 <input type="button" id="b2" onclick="fun1()" value="按钮">
</body>

沙发
发表于2016-09-03 13:59:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script>
//隐藏方法
function fun(){
   document.getElementById("txt").style.display="none";
}
//显示方法
function fun2(){
   document.getElementById("txt").style.display="block";
}
</script>
<form>
<input type="text" id="txt" style="display:block"><br>
<input type="button" value="隐藏" onclick="fun()">//隐藏按钮
<input type="button" value="显示" onclick="fun2()">//显示按钮
</form>

0

主题

1700

帖子

0

博客

song

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 13:59:41 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script>

function fun(){
  document.getElementById("txt").style.display="none";
    
}
</script>
<form>
<input  id="txt" name="name">
<div id="info"></div>
<input type="button" value="按钮" onclick="fun()">

</form>


效果:当点击按钮时,按钮上方的文本框自动隐藏

0

主题

1510

帖子

0

博客

zhangjialong

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 14:16:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script>

function fun(){
  document.getElementById("txt").style.display="none";
    
}
</script>
<form>
<input  id="txt" name="name">
<div id="info"></div>
<input type="button" value="按钮" onclick="fun()">

</form>


效果:当点击按钮时,按钮上方的文本框自动隐藏

0

主题

1450

帖子

0

博客

Sarbr

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 14:45:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

CSS中直接在组件中加style.display

js中用style的display控制组件显示

<script>

        function  sayHi(){
                document.getElementById("txt").style.display="none";
        }
        function  sayHi2(){
                document.getElementById("txt").style.display="block";
        }

</script>
<body >
<input type="txt" id="txt">
<input type="button" onclick="sayHi2()" value="显示" >
<input type="button" onclick="sayHi()" value="隐藏" >

</body>
WR

0

主题

1674

帖子

0

博客

WR

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 14:46:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

DOM元素

style="display:block"

style="display:none"

 

0

主题

1402

帖子

0

博客

马鹏磊

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 15:04:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

样式中的display控制DOM的显示与隐藏 none:隐藏 block:(默认)显示

 

 

<script>
 function fun(){
   document.getElementById("txt").style.display="none";
  }
  function fun2(){
   document.getElementById("txt").style.display="block";
  }
 


</script>

<html>
 <body>
  <form>
   <input type="text" id="txt" name="fname">
   
   <br>
   <input type="button" value="隐藏" onclick="fun()">
   <input type="button" value="提交" onclick="fun2()">
  
  </form>

 </body>
</html>

0

主题

1576

帖子

0

博客

liufangyuan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 15:01:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

需要配合使用css的display属性

对象.style.display:none或block


代码:


<script>
    function fun(){
        //得到两个div
        var obj_d1=document.getElementById("d1");
        var obj_d2=document.getElementById("d2");
        if(obj_d1.style.display=='block'){
            obj_d1.style.display="none";
            obj_d2.style.display="block";
        }else{
            obj_d1.style.display="block";
            obj_d2.style.display="none";
        }
    }
    
    //function fun2(){
       // $(#d1).toggle();
        //$(#d2).toggle();
    //}
    
</script>

<body>
     <div id="d1" style="display:none">
     <input type="button" value="关闭" onclick="fun()" id="btn2">
     <input type="button" value="修改">
     </div>
    
     <div id="d2">
     <input type="button" value="开启" onclick="fun()" id="btn1">
     </div>
    
    
</body>

0

主题

1451

帖子

0

博客

gaoye

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 16:20:36 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
如何显示/隐藏一个DOM元素
<br>
<script>
    function fun(){
        document.getElementById("an").style.display="none";
    }
    function fun2(){
        document.getElementById("an").style.display="block";
    }
</script>
<body>
    <input type="button" value="这是一个按钮" id="an"/><br><br>
    <input type="button" value="隐藏按钮" id="an2" onclick="fun()"/><br><br>
    <input type="button" value="显示按钮" id="an2" onclick="fun2()"/><br>
</body>

0

主题

1636

帖子

0

博客

renmihe

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 16:40:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<style>
.test{
    border:1px solid #foo
}
</style>
<script>

function fun(){

    //隐藏
    document.getElementById("txt").style.display="none";

}

function fun2(){

    //显示
    document.getElementById("txt").style.display="block";
}

</script>
<body>

<form>

    <input id="txt" name="name">

    <div id="info" <style>

    <input type="button" value="按钮" onclick="fun()">

   <input type="button" value="按钮" onclick="fun2()">

</form>
</body>

0

主题

1721

帖子

0

博客

XIAOC

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-05 15:42:58 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

display 的值为none为隐藏

display 的值为block显示

0

主题

1458

帖子

0

博客

梦紫菱0124

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-05 20:01:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

答:需要用到css中设置:

display:none

display:block

在JS中首先得到dom对象,

document.getElementById("").style.display="none";

document.getElementById("").style.display="block";


0

主题

529

帖子

0

博客

刘瑞

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-07 09:59:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
得到dom对象用display来控制

0

主题

1518

帖子

0

博客

Cracia

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-08 13:41:43 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    function fun(){
        document.getElementById("txt").style.display="none";
    }
    function fun2(){
        document.getElementById("txt").style.display="block";
    }
</script>
</head>

<body>
    <form>
        <input id="txt" name="txt1">  //input、div都可用style.display="none"
        <div id="info"></div>
        <input type="button" value="按钮" onClick="fun()">
        <input type="button" value="按钮2" onClick="fun2()">
        
    </form>
</body>
</html>

0

主题

150

帖子

0

博客

梦我成佛

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-10 09:17:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

dom.style.display='none'

XY

0

主题

587

帖子

0

博客

XY

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-18 11:25:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

html里面的显示/隐藏

style-“display:none”;


style-“display:block”;




<script>
function fun(){
  document.getElementById("txt").style.display="none";


}


function fun2(){
  document.getElementById("txt").style.display="block";


}
</script>


<form>
<input id="txt" name="name">
<div id="info" ></div>
<input type="button" value="按钮" onclick="fun()">
<input type="button" value="按钮2"  onclick="fun2()">
</form>

0

主题

637

帖子

0

博客

wangwei37079

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-03-23 19:18:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
FHGF

0

主题

1932

帖子

0

博客

740317431

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-15 13:04:09 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
元素.style.display="none"

0

主题

1902

帖子

0

博客

王之神判

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-16 08:55:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

style.disable="none";

style.disable="block";

0

主题

1694

帖子

0

博客

wulinan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-15 21:57:47 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
display属性

0

主题

441

帖子

0

博客

2013483297

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-09-02 18:00:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<script>
	function fun()
{
	document.getElementById("txt").style.display="none"
}
</script>
<form>
	<input id="txt" name="name" style="display:none">
	<div id="info"></div>
	<input type="button" value="提交" onclick="fun()">
</form>
zxx

0

主题

1135

帖子

0

博客

zxx

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-09-09 20:30:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

使用style的display属性,设置为none,则为隐藏,设置为block,则为显示

0

主题

741

帖子

0

博客

lilin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-09-19 08:55:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
document.getElementById("").style.display="none"

0

主题

445

帖子

1

博客

灰羽

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2018-03-17 19:49:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

<head>
<title></title>
<script>

function fun(){

}
</script>
<body>
<form>
   <input id= "txt" name="name" style="display:none">
   <div id="info" style="display:block"></div>
   <input type="button" value="按钮" onclick="fun()" style="display:block>
   </form>
   </body>



站点统计|举报|Archiver|手机版|小黑屋|Comsenz Inc.

GMT+8, , Processed in 0.195171 second(s), 9 queries .

Powered by javakc! X1.0

© 2004-2014 javakc

f1208.com 备案号:京ICP备14030918号-1

返回顶部