ITKeyword,专注技术干货聚合推荐

注册 | 登录

HTML style、display属性-如何设置隐藏、显示功能

xkhgnc_6666 分享于 2016-07-02

2020腾讯云共同战“疫”,助力复工(优惠前所未有!4核8G,5M带宽 1684元/3年),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1054

2020阿里云最低价产品入口,含代金券(新老用户有优惠),
地址https://www.aliyun.com/minisite/goods

        下面我们来看下如何来实现隐藏、显示功能;

        需求是这样的,点击成功,确定按钮和下面的输入框都不显示,点击失败,确定按钮和下面的输入框都显示;

这里可以通过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" onclick="setNoVisibility()" value="1" checked>成功
			</label>       
			 <label>
			  <input type="radio" name="bjRadios" id="bjNo" onclick="setVisibility()" value="0" checked>失败
			 </label>       
			 <label>
			  <button class="btn btn-primary" type="button" id ="bjkgan" onclick="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 = "";	
}

效果如下:


        下面我们来看下如何来实现隐藏、显示功能;         需求是这样的,点击成功,确定按钮和下面的输入框都不显示,点击失败,确定按钮和下面的输入框都显示; 这里可以通过style对象的vis

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。