K先生个人博客

当前位置:首页 > 爱技术 > 正文

js(jQuery)控制html元素隐藏

有时候我们会根据不同情况,隐藏某些html标签,利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。下面是用js来实现:

方法一:

document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";

利用上述方法实现隐藏后,页面的位置还被控件占用,但显示空白。

方法二:

document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";

利用上述方法实现隐藏后,页面的位置不被占用。当然我们也可以选择用jQuery来隐藏html元素,下面是一个使用jQery来隐藏html标签的实例。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery隐藏html标签元素</title>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide();
			});
		});
	</script>
</head>
<body>
<p>鼠标点击后隐藏</p>
</body>
</html>

如果你对该文章有任何疑问或好的建议,都可以在下方留言评论哦。

作者K先生本文地址http://www.gold404.cn/

版权声明:本文为原创文章,版权归 K先生个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

文章评论
* 必填项
可选
可选
评论列表

    暂时还没有评论哦!