如何使用javascript将div重置为其原始样式
[英]how to reset a div to its original style with javascript
问题描述
我正在尝试在 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(){
6 个解决方案
解决方案1
2 2019-05-30 04:52:44
直接来自MDN ：
通过将样式声明设置为 null 或空字符串来重置样式声明
因此，鉴于您当前的代码，这应该可以解决问题。 您只需要跟踪您更改了哪些特定样式，以便确保将其重置。
document.getElementById('button4').addEventListener('click', function(){
document.getElementById('box').style.height = null;
document.getElementById('box').style.background = null;
document.getElementById('box').style.opacity = null;
}
编辑：Kirbee 的答案可能更好，除非您希望保留其他内联样式，因为使用他们的解决方案您不必跟踪需要重置的所有样式。 此外，如果原始样式被定义为内联样式而不是在 CSS 文件中，我的解决方案将不起作用。 如果是这种情况，您需要做一些事情，将原始值存储在全局变量中，然后在重置样式时使用该变量。
解决方案2
1 2019-05-30 04:52:13
如果你的所有样式都像上面那样内联附加，我只会在相关元素上使用setAttribute来删除所有样式：
document.getElementById('box').setAttribute('style', '');
不过，正如另一位用户所提到的，添加和删除类可能是实现可维护性和可读性的首选方法。
解决方案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
这将起作用。
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
使用 onclick 覆盖您的听众。 像这样：
document.getElementById("button4").onclick = function(){
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.backgroundColor = "Orange";
document.getElementById("box").style.opacity = "100";
};
我怎样才能“重置”<div> 被 JavaScript 修改后恢复到原来的状态？
[英]How can I "reset" <div> to its original state after it has been modified by JavaScript?
用javascript函数更改HTML表格后，如何将其重置为原始表格？
[英]How to reset an HTML table to its original after changing it with a javascript function?
如何删除特定的div标签并使用javascript重置其内容
[英]How to remove a particular div tag and reset its content using javascript
javascript-通过部分ID重置所有div的样式，然后设置特定样式的div
[英]javascript - reset style for all divs by partial ID, then style specific div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.