html jquery修改height,Javascript / jQuery:当max-height设置为0时获取高度

当max-height设置为0时,是否可以获得元素attr高度的css值?

我需要知道要显示多少像素的元素,因为每个元素都有不同的高度,随着浏览器的大小而变化,我想从css文件中获取高度值.

解决方法:

如果通过scrollHeight属性有max-height = 0,则可以获取元素的高度.如果你设置了最小重量,它可以工作,但不是高度.

HTML:

Here you have a normal div

Something hidden is in here, but we can still get the height !

Something else here

JS:

alert(document.getElementById('toggable').scrollHeight)

CSS:

#toggable {

最大高度:0;

溢出:隐藏;

}

.other-content {

min-height: 100px;

}

标签:jquery,javascript,css,height

来源: https://codeday.me/bug/20190529/1177262.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!DOCTYPE html> <html> <head> <title>我的网页</title> <meta charset="UTF-8"> <style> /* CSS 样式表 */ body { margin: 0; background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 24px; } nav { background-color: #f1f1f1; text-align: center; padding: 10px; margin-bottom: 20px; } nav a { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18px; font-weight: bold; } nav a:hover { background-color: #ddd; color: black; } section { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } section img { max-width: 100%; height: auto; margin: 10px; box-shadow: 0 0 5px #ccc; } section p { font-size: 18px; line-height: 1.5; text-align: center; margin: 10px; } /* JavaScript */ section img:hover { transform: scale(1.1); box-shadow: 0 0 10px #ccc; } /* jQuery */ $(document).ready(function(){ $("nav a").click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); }); </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> /* JavaScript */ function showMsg() { alert("欢迎来到我的网页!"); } </script> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <nav> <a href="#" class="active">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <section> <img src="https://picsum.photos/200/300" alt="图片1"> <p>这是一张美丽的图片</p> <img src="https://picsum.photos/200/300" alt="图片2"> <p>这是另一张美丽的图片</p> <img src="https://picsum.photos/200/300" alt="图片3"> <p>这是第三张美丽的图片</p> </section> <footer> <p>2021我的网页</p> </footer> <script> /* JavaScript */ showMsg(); </script> </body> </html>
最新发布
06-10

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值