Question

我的网站每个页面上都有一个带有特定ID（＆＃34;容器＆＃34;）的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;');

Answer 1

您可以删除整个style属性

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

或者您只能删除max-width属性中的style属性：

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

参考文献的：

style

removeAttribute

Answer 2

我的问题是，我可以删除我刚添加的这种风格，所以只有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');

有关添加/删除课程的信息，请参阅Element.classList。

使用javascript添加和删除div样式，而css仍然适用

2 个答案: