文章详情页

JS如何控制页面高度来决定是否显示查看更多

浏览：197日期：2022-10-30 09:22:00

问题描述

<!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"> 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 zfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs zfsdfsdfdxfsdfsdfsdfs <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的时候就不现实展开全文。。。。。。

问题解答

回答1：

<!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">zfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfszfsdfsdfdxfsdfsdfsdfs展开全文</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>

回答2：

补充：demo高度小于500px的时候就不显示展开全文。。。。。。

上一条：对于meta的使用下一条：我是用sublime写的用ie打开的，为啥不行呢

相关文章：

1. javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？2. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么3. html5 - javascript写业务有用到什么编程范式没？4. html5 - vue-cli 装好了新建项目的好了，找不到项目是怎么回事？5. javascript - immutable配合react提升性能？6. javascript - vue 手机端项目在进入主页后在进入子页面，直接按返回出现空白情况7. css3 - 微信前端页面遇到的transition过渡动画的bug8. javascript - jQuery post()方法，里面的请求串可以转换为GBK编码么？可以的话怎样转换？9. python3.x - python 中的maketrans在utf-8文件中该怎么使用10. mysql - C#连接数据库时一直这一句出问题int i = cmd.ExecuteNonQuery();

排行榜

					
					css3 - 微信前端页面遇到的transition过渡动画的bug
关于nginx配置 获取静态资源
android - 两个实时互相监听的EditText怎么设置只能输入到小数点后四位？
网页动画等过渡效果，CSS3 transitions 和 jQuery animations 谁实现的性能更好？
node.js - webpack 配置文件 运行出错
javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？
java - 为什么此私有静态变量能被访问呢？
android - 如何将viewpager的图片与状态栏沉侵
用CSS3 box-sizing 属性实现两个并排的容器，如果想让容器中间有间隔该如何实现
python3.x - python 中的maketrans在utf-8文件中该怎么使用
javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么
				

热门标签