按钮、元素的显示/隐藏

莲寐

已于 2022-07-06 17:21:54 修改

阅读量872

点赞数 1

分类专栏： Easyui 文章标签： javascript css

于 2022-05-10 09:38:01 首次发布

本文链接：https://blog.csdn.net/u013059089/article/details/124680603

版权

Easyui 专栏收录该内容

7 篇文章

订阅专栏

Eayui的按钮显示/隐藏

这种写法是不占用原有位置

	// 隐藏
   $('#saveBtn').hide();
	// 显示
	$('#saveBtn').show();

display：元素的位置不被占用

	//display  不占用位置
	// 隐藏
	$("#saveBtn").css("display", "none")
	// 显示
	$("#saveBtn").css("display", "");
	// diaplay 原始写法
	//隐藏
	document.getElementById("saveBtn").style.display="none";
	// 显示
	document.getElementById("saveBtn").style.display="";

visibility 元素占用位置

	// visibility  占用位置
	// 隐藏
	$("#saveBtn").css("visibility", "hidden")
	// 显示
	$("#saveBtn").css("visibility", "visible")
	// visibility 原始写法
	// 隐藏
	document.getElementById("saveBtn").style.visibility="hidden";
	// 显示
	document.getElementById("saveBtn").style.visibility="visible";

html中display 与 visibility 用法

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<div id = "divTest">
  <input id ="saveBtn" type="button" value="保存" style="display:none";/>
  <input id ="saveBtn2" type="button" value="保存2" style="display:black;" />
  <input id ="saveBtn3" type="button" value="保存3" style="visibility:hidden";/>
  <input id ="saveBtn4" type="button" value="保存4" style="visibility:visible;" />
  <input id ="saveBtn5" type="button" value="保存5"/>
</div>