怎样在js中控制一个HTML元素的可见与不可见

 我来答
维湾教育培训
2015-12-07 · 知道合伙人软件行家
维湾教育培训
知道合伙人软件行家
采纳数:3549 获赞数:13648

向TA提问 私信TA
展开全部
用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。

function displayHideUI()
{
var ui =document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui =document.getElementById("bbs");
ui.style.display="";//display为空的话会好使,为block会使后边的空间换行
}

function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>

none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值compact,不过由于缺乏广泛支持,已经从CSS2.1 中删除。
marker CSS 中有值marker,不过由于缺乏广泛支持,已经从CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似<table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似<table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似<tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似<thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似<tfoot>)。
table-row 此元素会作为一个表格行显示(类似<tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似<colgroup>)。
table-column 此元素会作为一个单元格列显示(类似<col>)
table-cell 此元素会作为一个表格单元格显示(类似<td>和<th>)
table-caption 此元素会作为一个表格标题显示(类似<caption>)
inherit 规定应该从父元素继承display属性的值。
豆芽君93
推荐于2017-11-27 · TA获得超过165个赞
知道小有建树答主
回答量:122
采纳率:0%
帮助的人:140万
展开全部
 <button id="btn" onclick="showHide()">点击</button>
<div id="yuansu" style="width:100px;height:100px;background:green;display:block"></div>
function showHide(){
var btn = document.getElementById('btn');
var yuansu = document.getElementById('yuansu');
if(yuansu.style.display == "block"){
yuansu.style.display = "none";
}else{
yuansu.style.display = "block";
}
}

纯JS会比较多 用JQuery会比较简单 如果你需要的话我可以写给你

追问
好啊。你帮我写过来吧。谢谢导师。急需用。
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
freezing866
推荐于2018-02-26 · 知道合伙人互联网行家
freezing866
知道合伙人互联网行家
采纳数:145 获赞数:1032
六年网站开发经验,开发过的网站超过百个。擅长B2B、B2C、营销型网站开发。公司网址:www.wangyingshi.com

向TA提问 私信TA
展开全部
用js隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。
style.display="block"或style.visibility="visible"时控件或见;
style.display="none"或style.visibility="hidden"时控件不可见。
不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式