在css仍然适用的情况下使用javascript添加和删除div样式

作为模板的一部分，我在网站的每个页面上都有一个带有特定ID（“容器”）的DIV

#container
{
max-width:980px; min-width:980px; padding-top:6px;
}

单击按钮（切换全屏）时，我获得客户端支持的最大宽度，然后执行以下操作：

document.getElementById('container').setAttribute('style', 'max-width:' + width + 'px !important;');
document.getElementById('container').setAttribute('style', 'min-width:' + width + 'px !important;');

这工作正常，并将最大宽度设置为1400px

我的问题是，我是否可以删除我刚刚添加的样式，这样只有css会使用javascript应用

还是我的选择有相同的代码，回到980

document.getElementById('container').setAttribute('style', 'max-width:980px !important;');
document.getElementById('container').setAttribute('style', 'min-width:980px !important;');

---

您可以删除整个

样式

属性

 document.getElementById('container').removeAttribute('style');

或者，您可以仅删除

样式

属性中的

最大宽度

属性：

 document.getElementById('container').style.maxWidth = "none";

参考文献：

---

您可以删除整个

样式

属性

 document.getElementById('container').removeAttribute('style');

或者，您可以仅删除

样式

属性中的

最大宽度

属性：

 document.getElementById('container').style.maxWidth = "none";

参考文献：

我的问题是，我可以删除我刚刚添加的这个样式吗，所以只有css 是否会应用，使用javascript

你需要在这里使用一个类

.default-style
{
   max-width:980px; min-width:980px; padding-top:6px;
}

因此，在指定新宽度时，请先删除此类

document.getElementById('container').setAttribute('style', 'max-width:' + width + 'px;min-width:' + width + 'px;');
document.getElementById('container').classList.remove("default-style");

当你想回到默认状态时

document.getElementById('container').removeAttribute('style');
document.getElementById('container').classList.add('default-style');

有关添加/删除类的信息，请参阅

我的问题是，我可以删除我刚刚添加的这个样式吗，所以只有css 是否会应用，使用javascript

你需要在这里使用一个类

.default-style
{
   max-width:980px; min-width:980px; padding-top:6px;
}

因此，在指定新宽度时，请先删除此类

document.getElementById('container').setAttribute('style', 'max-width:' + width + 'px;min-width:' + width + 'px;');
document.getElementById('container').classList.remove("default-style");

当你想回到默认状态时

document.getElementById('container').removeAttribute('style');
document.getElementById('container').classList.add('default-style');

---

---

有关添加/删除类的信息，请参阅。

Brilliant，我担心类似的内容也会删除任何css，但不会。这不会删除css，这会操作DOM

style

属性，该属性覆盖已定义的css样式，但不会更改css文件中的任何内容。它只删除内联样式。@Bonatoc为什么？你能解释一下吗？我想这就是问题所在。记住，否决票不是为了好玩。为什么另一个答案是这个问题而不是这个？@Bonatoc，你能过来解释一下吗？或者你正在做一个巨魔马拉松？太棒了，我担心这样的东西也会删除任何css，它不会。这不会删除css，这会操作DOM

style

属性，覆盖定义的css样式，但不会更改css文件中的任何内容。它只删除内联样式。@Bonatoc为什么？你能解释一下吗？我想这就是问题所在。记住，否决票不是为了好玩。为什么另一个答案是这个问题而不是这个？@Bonatoc，你能过来解释一下吗？或者你正在进行巨魔马拉松？像素是强制性的吗？你为什么不以大众汽车为基础呢？为什么？重要吗？你最好使用CSS类，基于全屏模式有条件地应用。我会创建一个覆盖默认容器样式的“全屏”CSS类。然后，你可以在全屏显示时简单地向元素中添加一个类名，否则就删除它。像素是必须的吗？你为什么不以大众汽车为基础呢？为什么？重要吗？你最好使用CSS类，基于全屏模式有条件地应用。我会创建一个覆盖默认容器样式的“全屏”CSS类。然后，您可以在全屏显示时简单地向元素添加一个类名，不显示时将其删除。我的观点正是如此。但是再一次！重要的是坏习惯。如果需要，可以将“最大宽度”重置为默认浏览器值。@Bonatoc删除了

！重要信息

。现在不需要了。我同意应该非常小心地使用它。我很惊讶为什么@Bonatoc没有否决这一点。我觉得LOL@MarcosP埃雷兹古德我也不确定。无论如何，我已经删除了

！重要信息

<代码>请注意，我对这个答案投了赞成票。我也选了你的答案，因为我喜欢它的简单性，OP也喜欢它too@gurvinder372我（OP）投了你们两个的赞成票，他只是稍微快了一点。我的观点正是如此。但是再一次！重要的是坏习惯。如果需要，可以将“最大宽度”重置为默认浏览器值。@Bonatoc删除了

！重要信息

。现在不需要了。我同意应该非常小心地使用它。我很惊讶为什么@Bonatoc没有否决这一点。我觉得LOL@MarcosP埃雷兹古德我也不确定。无论如何，我已经删除了

！重要信息

<代码>请注意，我对这个答案投了赞成票。我也选了你的答案，因为我喜欢它的简单性，OP也喜欢它too@gurvinder372而我（OP）投了你们两人一票，他只是稍微快一点。