javascript - 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;
}

Answer 2

假设您有这样的链接：

<a href="#" id="tidy_toggle">click to display hidden element</a>

你可以像这样使用它：

var toggler = document.getElementById('tidy_toggle');
var tidy = document.getElementById('tidy');
toggler.onclick = function(event) {
    event.preventDefault();
    tidy.style.display = 'block';
    tidy.style.width = 'xxxpx';
}

Answer 3

在此处查看演示

function makevisible() {
     var tidy = document.getElementById("tidy");
     tidy.style.display= 'block';
     tidy.style.width = '100px';    
}  ​

Answer 4

document.getElementById('tidy').style.visibility = 'visible';