Question

在javascript中更改其原始状态后，我试图“重置”框。我已经使用了几种addEventListener方法来更改HTML中框的外观，但是在使用“重置”按钮将框恢复为其原始外观时遇到了麻烦。

document.getElementById('button1').addEventListener('click', function(){

  document.getElementById('box').style.height = '250px';

});

document.getElementById('button2').addEventListener('click', function(){

  document.getElementById('box').style.background = 'blue';

});

document.getElementById('button3').addEventListener('click', function(){

  document.getElementById('box').style.opacity = '0.1';

});

// This is where i need to reset the box

document.getElementById('button4').addEventListener('click', function(){

Answer 1

如果您的所有样式都将按上述方式内联，我只需在有问题的元素上使用setAttribute即可删除所有样式：

document.getElementById('box').setAttribute('style', '');

尽管，正如另一个用户提到的那样，添加和删除类可能是实现可维护性和可读性的一种更好的方法。

Answer 2

直接来自MDN：

通过将样式声明设置为null或空字符串来重置样式声明

因此，鉴于您当前的代码，这应该可以解决问题。您只需要跟踪更改了哪些特定样式，就可以确保将其重置。

{{1}}

编辑：除非您希望保留其他内联样式，否则Kirbee的答案可能会更好，因为使用它们的解决方案，您不必跟踪需要重置的所有样式。此外，如果将原始样式定义为内联样式，而不是在CSS文件中，则我的解决方案将无法使用。在这种情况下，您需要执行一些操作，将原始值存储在全局变量中，然后在重置样式时使用该变量。

Answer 3

var naturalHeight = document.getElementById('box').style.height;

从一开始就使用这样的var并在按下按钮时加载该值。

Answer 4

<html>
    <body>
    <div id='box'>Hello
    </div>
    <button id="button1">1 height</button>
    <button id="button2">2 bg</button>
    <button id="button3">3 opacity</button>
    <button id="button4">4 reset</button>
    <script type="text/javascript">
    
    box = document.getElementById('box');
    b1 = document.getElementById('button1');
    b2 = document.getElementById('button2');
    b3 = document.getElementById('button3');
    b4 = document.getElementById('button4');
    
    b1.addEventListener('click', 
    	function(){
      		box.style.height = '100px';
    	});
    
    b2.addEventListener('click',
    	function(){
    	  box.style.background = 'blue';
    	});
    
    b3.addEventListener('click',
    	function(){
    	  box.style.opacity = '0.1';
    });
    
    // This is where i need to reset the box
    
    b4.addEventListener('click', function(){
    	box.style = "";
    });
    </script>
    </body>
    </html>

Answer 5

这会起作用。

const el = document.querySelector('.base');
document.addEventListener('click', ({
  target
}) => {
  if (target.matches('#btn1')) {
    el.classList.add('style1');
  }

  if (target.matches('#btn2')) {
    el.classList.add('style2');
  }

  if (target.matches('#btn3')) {
    el.classList.add('style3');
  }

  if (target.matches('#btn4')) {
   el.classList.remove('style1', 'style2', 'style3');
   el.classList.add('base');
  }

});

.base {
  border: 1px solid red;
}

.style1 {
  border: 1px solid blue;
}

.style2 {
  font-weight: bold;
}

.style3 {
  color: green;
}

<div class="base">Test Div
  <div>
    <div>
      <button id="btn1">Button 1</button>
      <button id="btn2">Button 2</button>
      <button id="btn3">Button 3</button>
      <button id="btn4">Button 4 - Reset</button>
    </div>

Answer 6

使用 onclick 覆盖您的听众。像这样：

document.getElementById("button4").onclick = function(){

 document.getElementById("box").style.height = "150px";

  document.getElementById("box").style.backgroundColor = "Orange";

   document.getElementById("box").style.opacity = "100";
 };

如何使用javascript将div重置为其原始样式

6 个答案: