文章详情页

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

浏览：125日期：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. python - 获取到的数据生成新的mysql表2. javascript - js 对中文进行MD5加密和python结果不一样。3. mysql里的大表用mycat做水平拆分，是不是要先手动分好，再配置mycat4. window下mysql中文乱码怎么解决？？5. sass - gem install compass 使用淘宝 Ruby 安装失败，出现 4046. python - （初学者）代码运行不起来，求指导，谢谢！7. 为啥不用HBuilder?8. python - flask sqlalchemy signals 无法触发9. python的文件读写问题？10. 为什么python中实例检查推荐使用isinstance而不是type？

排行榜

					
					java - 关于 controller层与service层如何传值？
为什么python中实例检查推荐使用isinstance而不是type？
html5 - H5 SSE的本质是什么？
算法 - 如何不用递归 列出 树（多叉） 中根节点到叶节点的所有路径（Java）
怎么用css截取字符？
java - 异步上传图片无法即时回显
你们是如何避免transform:scale属性影响字体的？
前端 - 请问display: -webkit-flex;是什么意思？
视频 - html5 video的autoplay 在智能手機上不運作？
javascript - js 对中文进行MD5加密和python结果不一样。
sass - gem install compass 使用淘宝 Ruby 安装失败，出现 404
				

热门标签