文章詳情頁

JS如何控制頁面高度來決定是否顯示查看更多

瀏覽：147日期：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. linux - Ubuntu下編譯Vim8（+python）無數次編譯失敗2. javascript - Ajax加載Json時，移動端頁面向左上角縮小一截兒，加載完成后才正常顯示，這該如何解決？3. mysql ER_BAD_DB_ERROR: Unknown database ’test’4. python運行后沒有任何反饋要怎么排查5. python - pyspider爬pdf爬了一小段時間后就不動了6. javascript - h5 video層級太高導致浮在div上面，如何解決？7. python中怎么對列表以區間進行統計？8. css - 請問B站頂部的模糊半透明導航條是怎么實現的呢？9. mysql - 記得以前在哪里看過一個估算時間的網站10. css - 關于offsetLeft和offsetTop

排行榜

					
					基于Spring MVC Java的配置無法正常工作控制臺顯示無錯誤，但我的jsp頁面未顯示
javascript - 如何獲取未來元素的父元素在頁面中所有相同元素中是第幾個?
css - 請問B站頂部的模糊半透明導航條是怎么實現的呢？
mysql - 記得以前在哪里看過一個估算時間的網站
mysql  ER_BAD_DB_ERROR: Unknown database ’test’
android - 鍵盤遮擋RecyclerView
javascript - 圖片無法正常加載
angular.js - angular 2 應用如何進行打包？如何使用gulp打包？
javascript - Ajax加載Json時，移動端頁面向左上角縮小一截兒，加載完成后才正常顯示，這該如何解決？
linux - Ubuntu下編譯Vim8（+python）無數次編譯失敗
python中怎么對列表以區間進行統計？
				

熱門標簽