js隐藏域的显示与隐藏

最新推荐文章于 2021-03-13 02:53:11 发布
最新推荐文章于 2021-03-13 02:53:11 发布
阅读量274 收藏
点赞数 1
分类专栏： js 文章标签： 单元测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/younglibin/article/details/88348153
版权
<html>
<head>
<title>隐藏文本</title>
<script language="javascript">
function testVisibility()
{
document.all("tb_0").style.visibility="hidden";
document.all("tb_1").style.visibility="visible";
}
function testDisplay()
{
document.all("tb_0").style.display="none";
document.all("tb_1").style.display="block";
}
function test()
{
document.all("tb_0").style.visibility="visible";
document.all("tb_1").style.visibility="visible";
document.all("tb_0").style.display="block";
document.all("tb_1").style.display="block";
}
</script>
</head>
<body>
JS中的style对象中的display属性和visibility属性的区别 收藏
一、 display属性的常用属性值有两个,分别为

1、none: 隐藏，不占位，空件之间重新定位
2、block: 显示

二、 visibility属性的常用属性值有两个,分别为

1、hidden: 隐藏，占位
2、visible : 显示



示例:
<form name="form1" method="post">
<table id="tb_0">
<tr>
<td>内容测试--visible</td>
</tr>
</table>
<table id="tb_1">
<tr>
<td>内容测试--hidden</td>
</tr>
</table>
<input type="button" onClick="test();" value="还原">
<input type="button" onClick="testVisibility();" value="测试visibility">
<input type="button" onClick="testDisplay();" value="测试display">
</form>
</body>
</html>


style.display属性一切皆有可能

display版本：CSS1/CSS2　 兼容性：IE4+ NS4+　继承性：无

语法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

参数：
block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示
younglibin
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html隐藏域 js,JS实现“隐藏与显示”功能(多种方法)
weixin_31102797的博客
06-04 1053
下面我将效果图展示出来：1，通过按钮实现隐藏与显示：这个是通过按钮点击实现的隐藏与显示，具体代码如下：通过按钮实现隐藏和显示.body{margin: 0 auto;}#show{width: 600px;height: auto;font-size: 14px;background-color: #E4C392;display: block;padding: 10px;margin: 0 aut...
js与jquery隐藏域显示某元素
02-28 283
在js中隐藏某元素师在寻常不过的了，我们可以使用js，当然jquery也有相关函数， 今天就把他们放到一起，方便大家查询使用。 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/j
JS掉用隐藏域问题
lq547854的专栏
11-25 693
<br />我在.net 后台给隐藏域负了值 前台用JS调用 结果调出来的是乱码 怎么弄<br />如果是确定是c/s程序的话 需要在窗口中放入一个浏览器 ，然后 让浏览器加载含有这段js的页面 然后 通过浏览器对象调用。FCKeditor控件上传图片，ie7,ie8不显示图片，是不兼容吗？请问怎样解决？<br />首先：先确定下，你的FCKeditor是不是在本地可以上传文件到服务器而不是直接用网上的图片。<br />其次：就是图片路径原因了，与你所谓的不兼容一点关系都没有，你以为是写样式啊，还有兼容不兼
js动态控制td隐藏显示 jquery 动态控制td被另一个td代替,非常实用
初生的萌芽
10-11 7486
//我这里是通过触发一个下拉框事件onchange="changeTotalAmount(this.value)"   动态改变td的隐藏显示 //这是js动态在table添加的td数据 $("#tb").append ( "" + "" + $("#setDj").text() + " " + $("#delHref").text() + "" + "" +  "&
js隐藏域显示与隐藏
02-17
隐藏域操作经常 用到奥
html中隐藏域hidden的作用介绍及使用示例
09-28
5. 模拟全局变量：在客户端使用JavaScript时，全局变量可能会丢失，通过隐藏域可以将数据临时存储在页面上，保证数据在客户端的持久性。 6. 实现特定的客户端逻辑：例如，当需要在多个小窗口中传递数据而浏览器不...
Javascript显示和隐藏ul列表的方法
10-23
此外，CSS中也提供了display和visibility属性，用于控制元素的显示和隐藏，这在某些情况下可以与JavaScript一起使用，达到更好的效果。 最后，需要注意的是，在JavaScript中，对页面元素的操作可能会受到CSS样式的...
js 监听 隐藏元素的变化事件
07-01
对隐藏元素的监听，例如，隐藏的input框，普通change事件是无法监控的。
js隐藏td
loveking6的博客
01-07 7180
通过if条件判断td的显示情况 window.onload=function(){      &lt;%if(user.getRole().getRoleLevel().equals("3")){%&gt; //获取td的唯一标识，经过判断使其不显示（不占位隐藏）     document.getElementById("admin2").style.display="none";     ...
PHP前端代码隐藏显示的方法,JS实现“隐藏与显示”功能(多种方法)
weixin_35192920的博客
03-13 854
下面我将效果图展示出来：1，通过按钮实现隐藏与显示：这个是通过按钮点击实现的隐藏与显示，具体代码如下：通过按钮实现隐藏和显示.body{margin: 0 auto;}#show{width: 600px;height: auto;font-size: 14px;background-color: #E4C392;display: block;padding: 10px;margin: 0 aut...
在html页面添加一个隐藏域,并渲染一个需要保存的数值,在js中需要再获取,而不影响页面结构...
weixin_30721899的博客
05-13 883
1 <div style="display:none">可以将需要保存的数值放在文本内容中,也可以放在标签的属性当中, 如果放在文本内容中,注意换行后 \n 的存在</div> 转载于:https://www.cnblogs.com/lowmanisbusy/p/9031861.html...
JavaScrip显示和隐藏 代码域
因为有你
04-18 662
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;script&gt;//初始化加载赋值 function radow_load(){ document.getElementById("demo").i
JSP表单隐藏域通过JS设置
oneslide
12-31 1604
HTML <form action="login.jsp" method="post" id="data"> <input type="button" value="login" class="op" name="oper" onclick="judge(this)" /> <input type="button" value="Sign up" class="op" n
js修改页面hidden属性
热门推荐
huitest的博客
08-05 1万+
想获取这个value的值，但是看其是个input标签，他的type属性是hidden,也就是只能定位，不能对其操作，想要通过元素的 get_attribute("value")是不可能了，怎么办，通过js进行修改，但是首先需要定位这个，先通过控制台js定位一下，正确了再写代码 观察这元素，只能通过byname, by class定位，或者css,但是呢，下面的方法里面就没有这种方...
隐藏的空间是否占用
weixin_30933531的博客
09-27 95
转载：https://blog.csdn.net/u011967006/article/details/77156009 隐藏不占用空间： display:none; 以下为示例代码： <span style="display:none;">&nbsp;获取中</span> 隐藏占用空间： visibility:hidden; 以下...
Dreamweaver技巧：隐藏域、刷新设定与框架详解
本资源主要涵盖了Dreamweaver中的一些关键概念和技术，包括隐藏域、HTML头部元信息、刷新设置、框架、样式以及JavaScript交互。 1. 隐藏域（Hidden Fields）： 隐藏域是HTML表单中的一种元素，它们不会在页面上显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值