我相信很多人都像我一样记不住怎么获取窗口大小尺寸以及类似的屏幕, 窗口的大小尺寸, 可能因为太多了吧! 又不知道怎么理解, 所以有望大牛们为我指点指点一二, 入正题吧.
获取屏幕的高度
window.innerHeight(这个是包含滚动条的, 因为滚动条在窗口中, inner 就是内部);
元素的大小随着窗口大小而变化
元素. offsetTop 或者元素. offsetLeft(是获取当前元素相对文档的顶部的距离, 如果当前元素有了定位则是相对祖父元素的距离)
例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width">
- <title></title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .demo{
- border: 1px solid red;
- box-sizing: border-box;
- }
- </style>
- </head>
- <body>
- <a>ss</a>
- <div style="height:30px;"> 范德萨范德萨 </div>
- <div class="demo">div</div>
- <script>
- function hei(){
- var div = document.querySelector(".demo");
- var screenH = window.innerHeight;
- var offsetTop = div.offsetTop;
- div.style.height = screenH - offsetTop + "px";
- }
- hei();
- </script>
- </body>
- </html>
若无效果请复制代码;
更多的尺寸获取请点击 https://www.jb51.net/article/106472.htm
来源: http://www.qdfuns.com/article/48832/dbc06a9cc6b514b50b66f0614c4c54c7.html