company logo
advertisement for deep fried Twinkies


JS隐藏div和显示div


div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白

style="visibility: none;"

document.getElementById("tt").style.visibility="hidden";//隐藏

document.getElementById("tt").style.visibility="visible";//显示


通过设置display属性可以使div隐藏后释放占用的页面空间,如下

style="display: none;"

document.getElementById("tt").style.display="none";//隐藏

document.getElementById("tt").style.display="";//显示

只是隐藏,内容还在,所以还可以进行取值等操作

<div class="mui-input-row" style="margin: 5px 0px;">
				<textarea id="tt" rows="5" placeholder="输入你要发送的消息"></textarea>
			</div>
			<div class="mui-btn mui-btn-primary" onclick="show()">
					显示
				</div>
				<span class="mui-btn mui-btn-success" onclick="yc()">
					隐藏
				</span>
				<button type="button" class="mui-btn mui-btn-warning" onclick="aa()">
					输出
				</button>
//-------------------------------------------------------------------
function show(){
	//document.getElementById("tt").style.display="none";//隐藏

document.getElementById("tt").style.display="";//显示
	
}
function yc(){
	document.getElementById("tt").style.display="none";//隐藏
}
function aa(){
	var at = document.getElementById("tt").value;
	alert(at)
}