JS如何控制页面高度来决定是否显示查看更多-PHP中文网问答

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title>sdfsd</title>    
		<style type="text/css">    
			.demo{    
				width: 100%;    
				height: 500px;    
				overflow: hidden;    
				position: relative;    
			}    
			.art_show{    
				position: absolute;    
		z-index: 900;    
		bottom: 0;    
		margin: 0;    
		padding: 0;    
		width: 100%;    
		height: 50px;    
		border-bottom: 60px solid #f9f9f9;    
		background-image: linear-gradient(hsla(0,0%,100%,0),#f9f9f9);    
		color: #1c6bcc;    
		text-align: center;    
		line-height: 170px;    
			}    
			.pull{    
				position: absolute;    
				width: 16px;    
				left: 50%;    
				top: 54px;    
				margin-left: -8px;    
			}    
		</style>    
	</head>    
	<body>    
		<div class="demo">    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p><p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<p>zfsdfsdfdxfsdfsdfsdfs</p>    
			<div class="art_show"><img src="pull.png" class="pull" />展开全文</div>    
		</div>    
		<script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>    
		<script type="text/javascript">    
			$(".art_show").click(function(){    
				$(".demo").css({"height":"auto"});    
				$(".art_show").css({"display":"none"});    
			})    
		</script>    
	</body>    
</html>

如何通过JS控制 demo高度小于500的时候就不现实展开全文。。。。。。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sdfsd</title> <style type="text/css"> .demo{ width: 100%; position: relative; } .art_show{ position: absolute; display: none; z-index: 900; bottom: 0; margin: 0; padding: 0; width: 100%; height: 50px; border-bottom: 60px solid #f9f9f9; background-image: linear-gradient(hsla(0,0%,100%,0),#f9f9f9); color: #1c6bcc; text-align: center; line-height: 170px;cursor: pointer; } </style> </head> <body> <div class="demo"> zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs 展开全文 </div> <script src="jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var hei=$(".demo").height(); $(".demo p:gt(13)").hide(); if(hei>500){ $(".art_show").show(); } $(".art_show").click(function(){ $(".demo p:gt(13)").show(); $(this).hide(); }) </script> </body> </html>