HTML style、display屬性-如何設置隱藏、顯示功能

        下面我們來看下如何來實現隱藏、顯示功能；

        需求是這樣的，點擊成功，確定按鈕和下面的輸入框都不顯示，點擊失敗，確定按鈕和下面的輸入框都顯示；

這裏可以通過style對象的visibility屬性設置元素是否可見，

使用 Style 對象屬性的語法：

document.getElementById("id").style.property="值"

具體過程如下:

js文件中設置顯示與否的函數:

function setNoVisibility(){
	document.getElementById("bjkgan").style.visibility = "hidden";
	document.getElementById("jqxsbma").style.visibility = "hidden";
	document.getElementById("sbjqxsbxx").style.visibility = "hidden";
	document.getElementById("jqxsbxx").style.visibility = "hidden";
	document.getElementById("sbjqxsbxxma").style.visibility = "hidden";	
}

function setVisibility(){
	document.getElementById("bjkgan").style.visibility = "visible";
	document.getElementById("jqxsbma").style.visibility = "visible";
	document.getElementById("sbjqxsbxx").style.visibility = "visible";
	document.getElementById("jqxsbxx").style.visibility = "visible";
	document.getElementById("sbjqxsbxxma").style.visibility = "visible";	
}

ftl文件中增加觸發的函數:

<div class="col-lg-12">
         <div class="Radio" id="bjRadio">
	          <label class="control-label" for="formGroupInputLarge">報價開關：</label>
			<label>
			<input type="radio" name="bjRadios" id="bjYes" οnclick="setNoVisibility()" value="1" checked>成功
			</label>       
			 <label>
			  <input type="radio" name="bjRadios" id="bjNo" οnclick="setVisibility()" value="0" checked>失敗
			 </label>       
			 <label>
			  <button class="btn btn-primary" type="button" id ="bjkgan" οnclick="savebjxx()">確定</button>
			 </label>       
			</div>
                </div>
            </div>

最後結果就是上面顯示的結果。

這裏由於使用style屬性能夠達到效果，但是隱藏元素之後，會出現一大片空白，爲了達到隱藏元素又消除空白，這裏可以使用display屬性，js修改如下:

function setNoVisibility(){
	document.getElementById("bjkgan").style.display = "none";
	document.getElementById("jqxsbma").style.display = "none";
	document.getElementById("sbjqxsbxx").style.display = "none";
	document.getElementById("jqxsbxx").style.display = "none";
	document.getElementById("sbjqxsbxxma").style.display = "none";	
}

function setVisibility(){
	document.getElementById("bjkgan").style.display = "";
	document.getElementById("jqxsbma").style.display = "";
	document.getElementById("sbjqxsbxx").style.display = "";
	document.getElementById("jqxsbxx").style.display = "";
	document.getElementById("sbjqxsbxxma").style.display = "";	
}

效果如下: