文章详情页

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

浏览：41日期：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 - 回调函数和闭包的关系2. javascript - vue错误提示 Cannot read property ’beforeRouteEnter’ of undefined3. mysql_replication - mysql读写分离时如果单台写库也无法满足性能怎么解决4. python 中对redis 操作采用装饰器进行处理，怎么做5. python - 请问这两个地方是为什么呢？6. 数据库 - mysql联表去重查询7. html - CSS如何处理图片缩放问题？8. 请求一个接口，如何获取执行到的mysql，9. python - 如何让dataframe A 的一列与dataframe B的一列相减相加结果记到A的c列？10. javascript - 微信音乐分享

排行榜

					
					请求一个接口，如何获取执行到的mysql，
python - 如何让dataframe A 的一列与dataframe B的一列相减 相加结果记到A的c列？
python 中对redis 操作采用装饰器进行处理，怎么做
计算机专业，未毕业，自己买了一套Java视频看，打算花两个月时间，到时出去找份实习的，算是自己自学吗？
mysql_replication - mysql读写分离时如果单台写库也无法满足性能怎么解决
android有ldpi, mdpi, hdpi, xhdpi这些drawable文件夹，系统是依据什么去选择的？
数据库 - mysql联表去重查询
angular.js - angularjs子页面 怎么引用js
javascript - 回调函数和闭包的关系
python - 请问这两个地方是为什么呢？
android - Genymotion 模拟器可以做屏幕适配检测吗？
				

热门标签