javascript - 重置 JavaScript 在 onclick 函数中添加的样式

我上周开始编码，所以我对此还很陌生。我制作了一个 3x3 网格，我想使用 onclick 函数在每个方向上扩展该网格，我已经完成了。但我不知道如何添加重置按钮。我想要重置按钮将 3x3 网格设置回正常大小。

感谢任何帮助

function skråv(inn) {
  inn.innerHTML = '&#8598';
}

function skråvut(out) {
  out.innerHTML = '';
}

function opp(inn) {
  inn.innerHTML = '&#8593';
}

function opput(out) {
  out.innerHTML = '';
}

function skråh(inn) {
  inn.innerHTML = '&#8599';
}

function skråhut(out) {
  out.innerHTML = '';
}

function venstre(inn) {
  inn.innerHTML = '&#8592';
}

function venstreut(out) {
  out.innerHTML = '';
}

function midt(inn) {
  inn.innerHTML = '&#10005';
}

function midtut(out) {
  out.innerHTML = '';
}

function høyre(inn) {
  inn.innerHTML = '&#8594';
}

function høreut(out) {
  out.innerHTML = '';
}

function skrånedv(inn) {
  inn.innerHTML = '&#8601';
}

function skrånedvut(out) {
  out.innerHTML = '';
}

function ned(inn) {
  inn.innerHTML = '&#8595';
}

function nedut(out) {
  out.innerHTML = '';
}

function skrånedh(inn) {
  inn.innerHTML = '&#8600';
}

function skrånedhut(out) {
  out.innerHTML = '';
}

function klikkright() {
  document.getElementById("right").style.paddingRight = "100px";
}

function klikkleft() {
  document.getElementById("left").style.paddingLeft = "100px";
}

function klikkopp() {
  document.getElementById("up").style.paddingTop = "100px";
}

function klikkned() {
  document.getElementById("down").style.paddingBottom = "100px";
}

#white:hover {
  background-color: rgb(0, 255, 13);
}

#blue:hover {
  background-color: rgb(147, 33, 240);
}

.rutenett td {
  width: 150px;
  height: 150px;
  padding: 10px;
  font-size: 70px;
  border: 2px solid black;
  text-align: center;
  font-weight: bold;
}

#blue {
  background-color: rgb(52, 164, 255);
}

table,
td {
  border: 10px inset grey;
  margin-right: auto;
  margin-left: auto;
}

#white {
  background-color: white;
}

h1 {
  text-align: center;
  font-size: 60px;
  font-weight: ;
}

<body>
  <h1>3x3 GRID</h1>
  <table class="rutenett">
    <tr>
      <td id="blue" onmouseover="skråv(this)" onmouseout="skråvut(this)"></td>
      <td id="up" onmouseover="opp(this)" onmouseout="opput(this)" onclick="klikkopp(this)"></td>
      <td id="blue" onmouseover="skråh(this)" onmouseout="skråhut(this)"></td>
    </tr>
    <tr>
      <td id="left" onmouseover="venstre(this)" onmouseout="venstreut(this)" onclick="klikkleft(this)"></td>
      <td id="blue" onmouseover="midt(this)" onmouseout="midtut(this)"></td>
      <td id="right" onmouseover="høyre(this)" onmouseout="høreut(this)" onclick="klikkright(this)"></td>
    </tr>
    <tr>
      <td id="blue" onmouseover="skrånedv(this)" onmouseout="skrånedvut(this)"></td>
      <td id="down" onmouseover="ned(this)" onmouseout="nedut(this)" onclick="klikkned(this)"></td>
      <td id="blue" onmouseover="skrånedh(this)" onmouseout="skrånedhut(this)"></td>
    </tr>
  </table>

</body>

最佳答案

通过这种方式，您可以使用中心的按钮(X)作为重置按钮:

HTML:

function skråv(inn) {
  inn.innerHTML = '&#8598';
}

function skråvut(out) {
  out.innerHTML = '';
}

function opp(inn) {
  inn.innerHTML = '&#8593';
}

function opput(out) {
  out.innerHTML = '';
}

function skråh(inn) {
  inn.innerHTML = '&#8599';
}

function skråhut(out) {
  out.innerHTML = '';
}

function venstre(inn) {
  inn.innerHTML = '&#8592';
}

function venstreut(out) {
  out.innerHTML = '';
}

function midt(inn) {
  inn.innerHTML = '&#10005';
}

function midtut(out) {
  out.innerHTML = '';
}

function høyre(inn) {
  inn.innerHTML = '&#8594';
}

function høreut(out) {
  out.innerHTML = '';
}

function skrånedv(inn) {
  inn.innerHTML = '&#8601';
}

function skrånedvut(out) {
  out.innerHTML = '';
}

function ned(inn) {
  inn.innerHTML = '&#8595';
}

function nedut(out) {
  out.innerHTML = '';
}

function skrånedh(inn) {
  inn.innerHTML = '&#8600';
}

function skrånedhut(out) {
  out.innerHTML = '';
}

function klikkright() {
  document.getElementById("right").style.paddingRight = "100px";
}

function klikkleft() {
  document.getElementById("left").style.paddingLeft = "100px";
}

function klikkopp() {
  document.getElementById("up").style.paddingTop = "100px";
}

function klikkned() {
  document.getElementById("down").style.paddingBottom = "100px";
}

function reset() {
  document.getElementById("down").style.padding = "0px";
  document.getElementById("right").style.padding = "0px";
  document.getElementById("left").style.padding = "0px";
  document.getElementById("up").style.padding = "0px";
}

#white:hover {
  background-color: rgb(0, 255, 13);
}

#blue:hover {
  background-color: rgb(147, 33, 240);
}

.rutenett td {
  width: 150px;
  height: 150px;
  padding: 10px;
  font-size: 70px;
  border: 2px solid black;
  text-align: center;
  font-weight: bold;
}

#blue {
  background-color: rgb(52, 164, 255);
}

table,
td {
  border: 10px inset grey;
  margin-right: auto;
  margin-left: auto;
}

#white {
  background-color: white;
}

<table class="rutenett">
  <tr>
    <td id="blue" onmouseover="skråv(this)" onmouseout="skråvut(this)"></td>
    <td id="up" onmouseover="opp(this)" onmouseout="opput(this)" onclick="klikkopp(this)"></td>
    <td id="blue" onmouseover="skråh(this)" onmouseout="skråhut(this)"></td>
  </tr>
  <tr>
    <td id="left" onmouseover="venstre(this)" onmouseout="venstreut(this)" onclick="klikkleft(this)"></td>
    <td id="blue" onmouseover="midt(this)" onmouseout="midtut(this)" onclick="reset();"></td>
    <td id="right" onmouseover="høyre(this)" onmouseout="høreut(this)" onclick="klikkright(this)"></td>
  </tr>
  <tr>
    <td id="blue" onmouseover="skrånedv(this)" onmouseout="skrånedvut(this)"></td>
    <td id="down" onmouseover="ned(this)" onmouseout="nedut(this)" onclick="klikkned(this)"></td>
    <td id="blue" onmouseover="skrånedh(this)" onmouseout="skrånedhut(this)"></td>
  </tr>
</table>

注意: 您不应为 id 分配相同的值，id 是唯一标识符，相同的值可能会在 DOM 管理过程中产生异常。

关于javascript - 重置 JavaScript 在 onclick 函数中添加的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63491974/

javascript - 重置 JavaScript 在 onclick 函数中添加的样式

上一篇：julia - julia中有非线性混合整数求解器吗？

下一篇：python - 如何向 pandas 数据框添加二级索引