获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)

获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)

设置html,body{height:100%}

在使用html5文档类型的时候, 设置了html body的高度100%之后,两个浏览器就都能获取document.body.clientHeight了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹出层自定义(自动获取高度)</title>
        <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .Load{width:100%; background-color: rgba(221,221,221,0.5);}
            .LoadDiv{margin: auto; text-align: center;vertical-align: middle;position: absolute;top: 50%; left: 50%;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                     window.onload = function () {
                         getHeight();//调用函数
                     };
                      function getHeight() {
                          var Load = document.getElementById('Load');//获取Load的高度
                          var body_height = document.documentElement.clientHeight;//document.body.clientHeight中在<!DOCTYPE html>声明下会返回0
                          alert(body_height);
                          Load.style.height = body_height + 'px';//将正文的高度赋值给Load
                      }
            });
            
        </script>
    </head>
    <body>
        <div class="Load" id="Load">
            <div class="LoadDiv">
                <img src="layer/theme/default/loading-0.gif"/>
            </div>
        </div>
    </body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏js编程在工科课程中的简单应用

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1690
来自专栏Golang语言社区

[Go 语言社区]服务器读取配置文件只-json数据

package main // 导入需要的库 import ( "encoding/json" "fmt" ) // 结构体定义 type ...

4166
来自专栏前端知识分享

第51天:封装可视区域大小函数client

    offsetWidth: width  +  padding  +  border (披着羊皮的狼)  

894
来自专栏C/C++基础

web前端开发初学者十问集锦(3)

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

992
来自专栏Youngxj

CSS打造的动感loading效果

3184
来自专栏HTML5学堂

jQuery中prop和attr的区别

HTML5学堂:本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop(),很多开发者在使用时,经常容易混淆,今天HTM...

3969
来自专栏weixuqin 的专栏

Scrapy选择器的用法

36312
来自专栏编程坑太多

javascript图片无限懒加载

1553
来自专栏阮一峰的网络日志

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

5496
来自专栏前端菜鸟变老鸟

知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView

911

扫码关注云+社区

领取腾讯云代金券