设置div 居中和得到dom元素高度

小咪咪 2021-11-02 08:02 355阅读 0赞

javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth  
网页可见区域高： document.body.clientHeight  
网页可见区域宽： document.body.offsetWidth (包括边线的宽)  
网页可见区域高： document.body.offsetHeight (包括边线的高)  
网页正文全文宽： document.body.scrollWidth  
网页正文全文高： document.body.scrollHeight  
网页被卷去的高： document.body.scrollTop  
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight  
元素的实际宽度：document.getElementById("div").offsetWidth  
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft  
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

二.实例

</head>
    <body>
    <div id="main">
        <div id="error">
            <div>网络连接错误</div>
        </div>
    </div>
    </body>
    <script>
        total = document.documentElement.clientHeight;//得到窗口高度
        document.getElementById("main").style.height=total+"px";//设置main高度
        errorHeight = document.getElementById("error").offsetHeight;/*得到error高度*/
        document.getElementById("error").style.paddingTop=(total-errorHeight)/2+"px"; //设置error 居中
    </script>
    </html>

![1528244-20190714181524377-440009190.png][]

转载于:https://www.cnblogs.com/jiangfeilong/p/11185104.html

[1528244-20190714181524377-440009190.png]: /images/20211101/09162d1ae0b44998b2a9c321e274a401.png

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 div中的元素水平居中对齐

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

曾经终败给现在/ 2023年10月14日 20:25/ 0 赞/ 38 阅读

相关 css元素动态高度水平垂直居中

在明确宽高尺寸情况下，实现水平垂直居中方法： 1、使用固定定位 .div{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年12月07日 12:07/ 0 赞/ 209 阅读

相关 CSS自适应高度的div垂直水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

青旅半醒/ 2022年09月23日 13:49/ 0 赞/ 171 阅读

相关【css】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有

末蓝、/ 2022年08月21日 07:59/ 0 赞/ 264 阅读

相关无固定高度的div垂直居中

1、无固定高度的div垂直居中 – CSS 实现效果图如下： ![这里写图片描述][20160405144623489] 代码附上： <!DOCTYPE h

比眉伴天荒/ 2022年07月26日 00:24/ 0 赞/ 186 阅读

相关 div内元素居中

![这里写图片描述][SouthEast] <!DOCTYPE html> <html> <head> <meta charset="U

淩亂°似流年/ 2022年05月28日 05:35/ 0 赞/ 184 阅读

相关网页前端div的高度设置

首先我们要区分关于CSS里height的一个误区，width：100%是保持和父块宽度一样，但是有的时候我们设置height:100%会无效，为什么呢因为我们在div设计

蔚落/ 2022年04月16日 05:56/ 0 赞/ 417 阅读

相关没有固定高度的div，在父元素中垂直居中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

水深无声/ 2022年04月13日 05:59/ 0 赞/ 253 阅读

相关 css设置div垂直居中

一开始想着直接对div用margin-top:50%就行了，但不知道为什么会移到很下面，margin-top:12.5%才刚好居中，这个问题暂时还没有解决。这里介绍的方法是

傷城~/ 2021年12月09日 06:47/ 0 赞/ 369 阅读

相关设置div 居中和得到dom元素高度

javascript中获取dom元素高度和宽度的方法如下：网页可见区域宽： document.body.clientWidth 网页可见区域高： document.bo

小咪咪/ 2021年11月02日 08:02/ 0 赞/ 356 阅读