javascript - 我必须使用脚本、html、css 更改类

Question

我将类作为 col-sm-10 给了 div。但是在点击时，我希望该类成为该 div 的 col-sm-12。我的意思是，我希望它能够响应

function openNav() {
  document.getElementById("mySidenav").style.width = "15%";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

在页面加载 div col-sm-10 上将是 col-sm-12 并且在 openNav() 函数中我希望它又是 col-sm-10 反之亦然

谁能帮我解决这个问题？

Answer 1

这是一个片段，它应该只使用(vanilla)Javascript 来做你想做的事。
我在开头添加了变量影响，并在你的两个函数中添加了一行来更改 className:

(我还添加了 FontAwesome 和一些样式来使代码段效果可视化。)

var mySidenav = document.getElementById("mySidenav");
var table = document.getElementsByClassName("col-sm-10")[0];

function openNav() {
  mySidenav.style.width = "15%";
  // Solution to toggle between classes
  table.classList.add('col-sm-12');
  table.classList.remove('col-sm-10');
}

function closeNav() {
  mySidenav.style.width = "0";
  // Solution when you can replace all the class='…' string
  table.className = 'col-sm-10';
}

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}


/* Added to make it visual */
.col-sm-10,
.col-sm-12 {
  transition: 0.5s;
}

.col-sm-12 {
  margin-left: 15%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

希望对您有所帮助!