文章详情页

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

浏览：195日期：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. 为什么学习PHP3. html5 - vue.js中，如何对转义字符进行表达式判断？4. html5 - weex H5端的使用,怎么跑起来?5. CSS3可否做出这个效果？6. javascript - Meteor 中使用 bcrypt.compare 验证密码，如何在回调函数中修改全局变量？7. 老哥们求助啊8. mysql - 现在已经使用CommandArgument取到t_ID的值,现在还想取t_Name的值一起放到cs文件中的sql语句中该怎么做9. html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了10. 就一台服务器，mysql数据库想实现自动备份，如何设计？

排行榜

					
					我在centos容器里安装docker，也就是在容器里安装容器，报错了？
vue.js - vue获取mongodb中的数据起初显示未定义，但还是可以渲染
javascript - Meteor 中使用 bcrypt.compare 验证密码，如何在回调函数中修改全局变量？
CSS3可否做出这个效果？
html5 - vue.js中，如何对转义字符进行表达式判断？
html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了
为什么学习PHP
就一台服务器，mysql数据库想实现自动备份，如何设计？
老哥们求助啊
mysql - 现在已经使用CommandArgument取到t_ID的值,现在还想取t_Name的值一起放到cs文件中的sql语句中该怎么做
javascript - 求一款靠谱点的移动端图片查看器插件，老司机速进！
				

热门标签