Javascript - 更改 div 的 css 以使其可见？

Question

我使用 CSS 将名为“tidy”的 DIV 设置为不可见且宽度为 0px。

<div id='tidy'>Test div I am hidden</div>

我试图只使用 javascript 来保持页面简洁，所以不能使用 jquery。

我怎样才能创建一个链接，当点击该链接时，div 将再次可见并将宽度设置为 xxxpx？

Answer 1

使用隐藏不占用页面空间的显示样式:

var node = document.getElementById("tidy");

function hideTidy() {
    node.style.display = "none";
}

function showTidy() {
    node.style.display = "";
}

添加简单的切换:

var tidyVisible = true;

function toggleTidy() {
    (tidyVisible ? hideTidy : showTidy)();
    tidyVisible = !tidyVisible;
}