如何使用javascript将div重置为其原始样式
[英]how to reset a div to its original style with javascript
问题描述
I am trying to "reset" box after several changes to its original state in javascript.
我正在尝试在 javascript 中对其原始状态进行多次更改后“重置”框。 I have used several addEventListener methods to change the appearance of a box in HTML, but am having trouble using a "reset" button to revert the box to its original appearance.我使用了几个 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(){
6 个解决方案
解决方案1
2 2019-05-30 04:52:44
A style declaration is reset by setting it to null or an empty string通过将样式声明设置为 null 或空字符串来重置样式声明
So given your current code, this should do the trick.因此，鉴于您当前的代码，这应该可以解决问题。 You will just need to keep track of what specific styles you changed so you can make sure you reset it.您只需要跟踪您更改了哪些特定样式，以便确保将其重置。
document.getElementById('button4').addEventListener('click', function(){
document.getElementById('box').style.height = null;
document.getElementById('box').style.background = null;
document.getElementById('box').style.opacity = null;
}
Edit: Kirbee's answer is probably better unless there are other inline styles that you want to be preserved because using their solution you don't have to keep track of all the styles you need to reset.编辑：Kirbee 的答案可能更好，除非您希望保留其他内联样式，因为使用他们的解决方案您不必跟踪需要重置的所有样式。 Additionally, if the original styles are defined as inline styles and not in a CSS file, my solution will not work.此外，如果原始样式被定义为内联样式而不是在 CSS 文件中，我的解决方案将不起作用。 If that is the case, you would need to do something where you store the original values in a global variable and then use that variable when resetting the styles.如果是这种情况，您需要做一些事情，将原始值存储在全局变量中，然后在重置样式时使用该变量。
解决方案2
1 2019-05-30 04:52:13
If all your styles are going to be appended inline as above, I would just use setAttribute on the element in question to remove all the styles:如果你的所有样式都像上面那样内联附加，我只会在相关元素上使用setAttribute来删除所有样式：
document.getElementById('box').setAttribute('style', '');
Though, as another user has mentioned, adding and removing classes is probably a preferable way to do this for maintainability and readability.不过，正如另一位用户所提到的，添加和删除类可能是实现可维护性和可读性的首选方法。
解决方案3
1 2019-05-30 04:53:08
var naturalHeight = document.getElementById('box').style.height;
从一开始就使用 var 并在按下按钮时加载此值。
解决方案4
0 2019-05-30 04:53:46
<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>
解决方案5
0 2019-05-30 04:59:42
Here this will work.这将起作用。
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>
解决方案6
0 2021-01-08 18:12:51
use an onclick to override your listeners.使用 onclick 覆盖您的听众。 Like this:像这样：
document.getElementById("button4").onclick = function(){
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.backgroundColor = "Orange";
document.getElementById("box").style.opacity = "100";
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.