javascript - 显示问题 :none for some ajax content and a javascript toggle function

Question

在我的网站上，我试图将我所有的内联样式合并到一个外部 css 文件中。我注意到在我的 7 个主要页面上我有数百个内联 style="display:none" 语句，所以我想我可以通过向我的外部样式表添加一个类来减少我的文件的一些 kB如下:

.DN {
    display:none;
}

在我的 7 个页面上，将每个内联 style="display:none" 替换为 class="DN" 总共减少了大约 5 kB(7 个页面的总和) ).但是，有几个地方失败了。例如，在一个页面上，用户可以通过在 display:none div 之间切换(每个 div 都设置为 display:none...除了#div1，默认情况下，当用户进入此页面时，可见性设置为可见)使用以下函数(toggle(layer) 在每次鼠标单击其他页面时调用元素):

function toggle(layer) {
    var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8", "div9",    
    "div10", "div11"];
    for (var i = 0; i < divs.length; i += 1) {
        document.getElementById(divs[i]).style.display = 'none';
    }
    document.getElementById(layer).style.display = '';
}


<div id="div1" style="visibility:visible">More HTML here</div>
<div id="div2" style="display:none">More HTML here</div>
//9 more display:none divs...success

但是，当 div 样式更改为 class="DN"(class="DN" 替换 style="display:none")，div 的行为就好像 DN 类根本不存在一样。我最近在网站上的一些加载了 ajax 的内容上遇到了类似的问题。

<div id="div2" class="DN">More HTML here</div>
//Fail...div does not appear upon mouseclick of menu buttons

我认为外部 css 文件应该为所有 DOM 元素设置样式。作为旁注，我检查以确保我的外部文件中没有冲突的 css 样式元素......我看不到任何冲突(例如，如果我的其他 div 之一有 visibility:visible 外部 CSS 文件中的样式等)。出于好奇，是否想过通过设置 class="DN" 而不是内联 style="display:none" 可能会出现什么问题？

Answer 1

当您将 document.getElementById(layer).style.display = ''; 显示设置为空字符串时，CSS 仍通过样式表应用。如果您想覆盖样式表，在这种情况下，您可能需要将该行更新为 document.getElementById(layer).style.display = 'block';。