jQuery 怎么获取隐藏元素的高度? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1: 使用 innerHeight() 方法计算隐藏元素的 innerHeight 高度
innerHeight: 当不考虑所选元素的边框宽度时, 会考虑此高度.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- div { width: 310px; height: 80px; font-weight: bold; color: green; font-size:
- 25px; border: 1px solid green; visibility: hidden; } body { border: 1px
- solid green; padding: 10px; width: 300px; }
- </style>
- </head>
- <body>
- <div>
- </div>
- <p id="demo">
- 这里将显示隐藏的 "div" 元素的高度.
- </p>
- <button id="btn1">
- Submit
- </button>
- </body>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("#btn1").click(function() {
- var demo = $("div").innerHeight();
- $("#demo").text(demo);
- });
- });
- </script>
- </HTML>
效果图:
方法 2: 使用 outerHeight() 方法计算隐藏元素的 outerHeight 高度
outerHeight: 当考虑所选元素的边框宽度时, 将考虑此高度.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- div { width: 310px; height: 80px; font-weight: bold; color: green; font-size:
- 25px; border: 1px solid red; visibility: hidden; } body { border: 1px solid
- red; padding: 10px; width: 300px; }
- </style>
- </head>
- <body>
- <div>
- </div>
- <p id="demo">
- 这里将显示隐藏的 "div" 元素的高度.
- </p>
- <button id="btn1">
- Submit
- </button>
- </body>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- $(document).ready(function() {
- $("#btn1").click(function() {
- var demo = $("div").outerHeight();
- $("#demo").text(demo);
- });
- });
- </script>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17069.html