HTML5具有新的全局属性,hidden可用于隐藏内容.
<article hidden>
<h2>Article #1</h2>
<p>Lorem ipsum ...</p>
</article>
CSS具有display:none规则,也可用于隐藏内容.
article { display:none; }
在视觉上,它们是相同的.语义上有什么区别？计算？
我应该考虑何时使用其中一个？
TIA.
编辑:基于@newtron的回复(下文),我做了更多的搜索.该hidden属性去年激烈争论,(显然)几乎没有进入HTML5规范.有些人认为这是多余的,没有任何目的.据我所知,最终的评估是这样的:如果我只针对网络浏览器,那就没有区别了.(有一页甚至声称Web浏览器用于display:none实现隐藏属性.)但是如果我正在考虑可访问性(例如,我希望我的内容可以被屏幕阅读器读取),那么就会有所不同.CSS规则display:none可能会将我的内容隐藏在Web浏览器中,但相应的咏叹调规则(例如aria-hidden="false")可能会尝试阅读它.因此,我现在同意@newtron的答案是正确的,尽管可能(可以说)并不像我想的那样清楚.感谢@newtron的帮助.
可能重复:
点击时显示Javascript元素
我跟随DIV.我想在点击按钮后显示DIV.现在它没有显示
<div style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" >
我有HTML与动画的目标一个非常基本的片从display: none;到display: block不透明度变化的从0到1.
我正在使用Chrome浏览器,它使用-webkit前缀作为首选项,并进行了-webkit-keyframes转换设置以使动画成为可能.但是,它不起作用,只是改变display而不褪色.
我这里有一个JSFiddle .
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
@-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: …寻找一个好的JavaScript,以帮助我隐藏/显示多个div与一个按钮点击而不是一个点击,所以我可以在博客中使用它.我一直在寻找一段时间的答案,并且无法找到一个使用JavaScript和/或CSS的好答案.我是一个新手所以请耐心等待.以下是我的代码,但我想简化它并使其工作,以便当我再次单击相应的按钮时它将关闭div.
CSS
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
我知道有一种更简单的方法,但这是我能找到的唯一方法,它适用于我希望它在大多数情况下做的事情
HTML
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 …我的CSS:
#a_x200{
visibility: hidden;
width: 200px;
height: 200px;
background-color: black;
}
我的JS:
<script type="text/javascript">
function show(id) {
document.getElementById(id).style.display = 'block';
}
</script>
我的Html
<div id="a_x200">asd</div>
<innput type="button" class="button_p_1" onclick="show('a_x200');"></input>
不工作我想我错过了什么!
我有一个带有提交按钮的简单 HTML 表单。点击此按钮后，我想查看div#my_id以前不可见的内容。
<input type="submit" name="xxx" value="yyy" onclick="document.getElementById('my_id').style.display = 'block' ;">
<div id="my_id" style="display: none"> My text </div>
我怎样才能让它发挥作用？
我想在没有Jquery的情况下这样做.我想在点击触发器时显示div.到目前为止,我有这个隐藏元素.
document.getElementById('element').style.display = 'none';
HTML ..
<div class="element">Ahem, boo!!</div>
<a href="#" id="showDiv">Show</a>
单击链接时如何创建显示div的函数？我想避免使用onclick="showDiv()链接本身的功能.