javascript怎么显示css隐藏的元素
发布网友
发布时间：2022-04-06 11:05
共10个回答
热心网友
时间：2022-04-06 12:34
思路：
css隐藏的元素大部分都是display：none的元素。
用js获取响应的元素，然后修改style属性即可
例子：
<table><tr id="menu" >
<td>控制这个tr的显示/隐藏</td>
</tr>
</table>
<script type="text/javascript">
function display(id){
var traget=document.getElementById(id);
if(traget.style.display=="none")
{ traget.style.display="";
}else{
traget.style.display="none";
}
}
</script>
热心网友
时间：2022-04-06 13:52
当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
热心网友
时间：2022-04-06 15:27
但是你js哪里只写了一个显示，还有另一个隐藏的没有显示，所以就不会显示了
热心网友
时间：2022-04-06 17:18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Workshop 5 – Challenge 1</title>
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
if(document.getElementById("cbSubscribe").checked)
document.getElementById("show").style.display = "block";
else
document.getElementById("show").style.display = "none";
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="p_Subscribe">
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onclick="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
</p>
<div id="show" style="display:none">
<p id="p_Email" class="hidden">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail" onclick="ToggleEmail()">
</label>
</p>
</div>
</form>
</body>
</html>
热心网友
时间：2022-04-06 19:26
改成<p id="p_Email" >
然后你的脚本我给你完善了一下，选中的时候显示，不选中的时候让它再隐藏回去。 你的脚本只让他显示了 ，但是如果我取消选中的话那个层还是显示的，所以给你把脚本改了一下：
<script type="text/javascript">
function ToggleEmail() {
// How do I change display from none to "inline"?
cb = document.getElementById("cbSubscribe");
if (cb.checked) {
document.getElementById("show").style.display = "block";
}
else
document.getElementById("show").style.display = "none";
}
</script>
热心网友
时间：2022-04-06 21:51
$("#show").show();
热心网友
时间：2022-04-07 00:32
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label>
<input type="checkbox" name="cb" id="cb" onclick="showemail()">
Yes! I would like to receive the newsletter via email.
</label>
</div>
<div id="mbox" style="display: none">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail">
</label>
</div>
<script>
function showemail() {
document.getElementById('mbox').style.display="block";
}
</script>
</body>
</html>
热心网友
时间：2022-04-07 03:30
热心网友
时间：2022-04-07 06:45
去掉class
<p id="p_Email">
热心网友
时间：2022-04-07 10:16
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Workshop 5 – Challenge 1</title>
<script type="text/javascript">
function ToggleEmail() {
var dom = document.getElementById("cbSubscribe");
var dom1 = document.getElementById("show");
if(dom.checked){
dom1.style.display = "block";
}else{
dom1.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Workshop 5 - Challenge 1</h1>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<label>
<input type="checkbox" name="Subscribe" id="cbSubscribe" onchange="ToggleEmail()">
Yes! I would like to receive the newsletter via email.
</label>
<div id="show" style="display:none">
<label>
Email Address:
<input type="text" name="Email" id="tbEmail">
</label>
</div>
</fieldset>
</form>
</body>
</html>
