js 控制样式显示隐藏

<input id="challengeCode" name="challengeCode" type="text" class="login_box" style="display:none;width: 40%;" />

默然是隐藏的input

/**
*当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或*style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显*示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
*/
//显示样式
//display为空的话会好使，为block会使后边的空间换行
document.getElementById('challengeCode').style.display ="";
document.getElementById('challengeCode').style.visibility="visible"

//隐藏样式
//不再占有空间
document.getElementById('challengeCode').style.display ="none";
//占有空间
document.getElementById('challengeCode').style.visibility="hidden"

 

display:none是样式直接消失，不占有空间，浏览器不解析这个样式。hidden只是视觉上的隐藏，浏览器是能解析到的，样式还存在，占有空间，只是不再展示在页面上。