Question

我目前正在为网站制作注册页面，需要显示典型的密码确认消息。我如何制作一个隐藏和显示div的脚本？

据我所知：

<html><head>
<script language="javascript">
function correctpassword()
var password="password"
var confirmpassword="confirmpassword" 
if (password1 != password2)
{
showcss="unconfirmed"
}
else
{
showcss="confirmed"
}
</script>
</head>
<body>
<form>
<u>Personal Details</u>
First Name: <input type="text" id="firstname">
Last Name: <input type="text" id="lastname">
Date of Birth:
Gender: Male Female
<u>Login Details</u>
Email Adress:<input type="text" id="email">
Username:<input type="text" id="username">
<!--check avalibility-->
Password:<input type="text" id="password">
Confirm Password:<input type="text" id="confirmpassword">
<!--Javascript if "password" doesnt equal "confirm password" showcss passwords don't match-->
<button type="button" onclick="correctpassword()">Display Date</button>
</form>
</body>
</html>

PS：变量可能是错误的。

Answer 1

假设您正在讨论隐藏/显示HTML中的div，span或其他类似元素，您可以使用jQuery JavaScript framework。例如：

$('#element_to_show').show();
$('#element_to_hide').hide();

您可以通过事件触发隐藏/显示，例如按键或用户离开输入元素，也在jQuery中。

Answer 2

使用应用于类标记属性的className属性控制样式和外观。尽量避免使用元素的.style属性，而是添加/删除一些类。它将在未来为您提供更多控制并简化维护。

在css中：

.show{
  display:block;
}

.box{
  display:none;
}

in html：

<div id="passConfirm"></div>
<div id="box"></div>

在你的脚本中

：

var confirmEl,
    confirmBox;
confirmEl = document.getElementById('passConfirm');
confirmBox = document.getElementById('box');
confirmEl.addEventListener('click', showBox, false);

function showBox () {
  confirmBox.className += ' show';
}

如上所述，您可以使用一些有助于使用DOM的库或编写自己的函数来帮助添加和删除某些类，检查hasClass方法等。

Answer 3

我在打电话，因此答案很简短。最简单的方法是获取像document.getElementById这样的元素的id，并将其放入变量中。然后使用样式属性，如

Obj.style.display = "none";

隐藏它。

如何使用javascript显示/隐藏div

3 个答案: