javascript - 使用 getElementsByClassName 触发显示

标签 javascript html css

我希望 “没有帐户？” 行在单击时触发 .registrybox 类的显示。我写下了一些脚本，但它不起作用。脚本指定当点击没有帐户？时，.loginbox 应该消失并替换为 .registrybox 类代码。

那些 CSS display: none 和 display: block 是事先写好的。

function displayRegistry() {
  document.getElementsByClassName('.registrybox').style.display = "block";
  document.getElementsByClassName('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

最佳答案

实际上 getElementsByClassName() 返回一个 array-like 具有匹配类名的对象，因此您需要使用 [0] 获取元素...此外，您不需要使用 . 使用 getElementsByClassName()

时的句号 

function displayRegistry() {
  document.getElementsByClassName('registrybox')[0].style.display = "block";
  document.getElementsByClassName('loginbox')[0].style.display = "none";
}
function displayLogin() {
  document.getElementsByClassName('registrybox')[0].style.display = "none";
  document.getElementsByClassName('loginbox')[0].style.display = "block";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#" onclick="displayLogin()">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

或者你可以使用querySelector...

function displayRegistry() {
  document.querySelector('.registrybox').style.display = "block";
  document.querySelector('.loginbox').style.display = "none";
}
.loginbox {
  width: 320px;
  height: 420px;
  background-color: ;
  color: #fff;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 50px 20px;
  display: block;
}


}
h1 {
  margin: 0;
  padding: 0 0 20px;
  text-align: center;
  font-size: 22px;
}
.loginbox p {
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.loginbox input {
  width: 100%;
  margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.loginbox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  background: #fb2525;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.loginbox a {
  text-decoration: none;
  color: darkgrey;
  font-size: 15px;
  line-height: 20px;
}
.loginbox a:hover {
  color: red;
}
.registrybox {
  width: 320px;
  height: 420px;
  color: #fff;
  top: 10%;
  left: 20%;
  position: absolute;
  transform: trnaslate(-50%, -50%);
}
.registrybox p {
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.registrybox input {
  width: 100%;
  margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  height: 40px;
  color: #fff;
  font-size: 16px;
}
.registrybox input[type="submit"] {
  border: none;
  outline: 0;
  height: 40px;
  color: #fff;
  background: #fb2525;
  font-size: 18px;
  border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
  cursor: pointer;
  background: red;
  color: #000;
}
.registrybox a {
  text-decoration: none;
  color: darkgrey;
  line-height: 20px;
  font-size: 15px;
}
.registrybox {
  display: none;
}
select {
  padding: 10px;
  border: none;
  border-radius: 10px;
}
<div class="loginbox">
  <h1>Login Here</h1>
  <form>
    <p>Username</p>
    <input type="text" name="" placeholder="Enter Username">
    <p>Password</p>
    <input type="password" name="" placeholder="Enter Password">
    <input type="submit" name="" value="Login">
    <a href="#">Forgot password?</a><br>
    <a href="#" onclick="displayRegistry()">Dont have an account?</a>
  </form>
</div>
<div class="registrybox">
  <h1>Registration</h1>
  <form>
    <p>Username</p>
    <input type="text" placeholder="Enter Username">
    <p>E-mail</p>
    <input type="text" placeholder="Enter E-mail">
    <p>Password</p>
    <input type="password" placeholder="Enter password">
    <p>Repeat Password</p>
    <input type="password" placeholder="Confirm password">
    <input type="submit" value="Sign up">
    <a hred="#">Already registered?</a>
    <select name="dobmonth">
      <option>month</option>
      <option value="january">January</option>
    </select>
    <select name="dobyear">
      <option>Year</option>
      <option value="2000">2006</option>
      <option value="2000">2005</option>
      <option value="2000">2004</option>
      <option value="2000">2003</option>
      <option value="2000">2002</option>
      <option value="2000">2001</option>
      <option value="2000">2000</option>
      <option value="2000">1999</option>
    </select>
  </form>
</div>

关于javascript - 使用 getElementsByClassName 触发显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49571246/

上一篇：html - 我还应该为 iframe 使用 seamless 属性吗？

下一篇：javascript - 初学者javascript，显示数组中的前一个数字并重置函数

相关文章：

javascript - AngularJS 将变量传递给工厂

html - css 弹出窗口影响 html 布局

html - CSS :first-child and :first-of-type (example)

css - HTML5 的悬停导航链接将不起作用

javascript - 创建通用的 javascript 或 jquery，使 div 或标签集在单击 div 或标签时集中于其内部的第一个输入

php - 在数据库中存储大量标记的最佳方法是什么？

html - AngularJS:在调用它的按钮上应用动态类

Jquery Toggle不在移动设备上切换类

javascript - 在 Jquery .css({高度 : "300px !important"}) not working

用于验证表单和显示 css 加载屏幕的 Javascript 函数

©2024 IT工具网  联系我们