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>

设置div 居中 和得到dom元素高度的更多相关文章

  1. javascript中获取dom元素高度和宽度

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

  2. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  3. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. 设置div居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Jquery系列：设置div、span等dom结点的内容，jquery中没有innerText、innerHtml

    发现如果我在div或者其他非表单的标签中赋值,原本用普通的js就直接document.getElementById("id").innerHtml(或者其他几个)就可以了. 但是在 ...

  6. javascript中获取dom元素的高度和宽度

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

  7. js | javascript中获取dom元素的高度和宽度

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

  8. DIV居中的经典方法

    1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 height: 100px ...

  9. React从入门到精通系列之(14)refs和DOM元素

    react.js 3.7k 次阅读  ·  读完需要 8 分钟 8 十四.refs和DOM元素 在典型的React数据流中,props是父组件与其子组件交互的唯一方式. 要修改子组件,需要使用一个新的 ...

随机推荐

  1. IntelliJ IDEA 开发工具的一些设置

    IntelliJ IDEA 开发工具的一些设置 参考资料 IntelliJ IDEA 的学习,离不开网络上技术热爱者们的分享,在此向他们表示感谢. 成吨提高开发效率:https://github.co ...

  2. ANativeWindow_fromSurface

    c++后台若使用ANativeWindow_fromSurface将surface转化为ANativeWindow: 需要头文件:#include <android/native_window_ ...

  3. iptables List the rules in a chain or all chains

    [root@e ~]# iptables -hiptables v1.4.21 Usage: iptables -[ACD] chain rule-specification [options] ip ...

  4. VMware 虚拟化编程(9) — VMware 虚拟机的快照

    目录 目录 前文列表 VMware 虚拟机的快照 快照的执行过程 删除快照 快照类型 Quiseced Snapshot 前文列表 VMware 虚拟化编程(1) - VMDK/VDDK/VixDis ...

  5. Jenkins简介&邮箱配置

    一.Jenkins基本介绍: Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.--摘自百科 二 ...

  6. Mac基本配置

    相关操作 配置文件 java 下载jdk-12.0.1_osx-x64_bin.dmg 配置环境变量 #配置java JAVA_HOME=/Library/Java/JavaVirtualMachin ...

  7. 工具 - MSF

    #ms17- use auxiliary/scanner/smb/smb_ms17_010 - exploit use exploit/windows/smb/ms17_010_eternalblue ...

  8. 计算距离的SQL语句

    一,BEGINset @num=6378.138*2*ASIN(SQRT(POW(SIN((lat1*PI()/180-lat2*PI()/180)/2),2)+COS(lat1*PI()/180)* ...

  9. OuterXml和InnerXml

    例如 <bkk> <rp fe="few" > <fe>fff</fe> </rp> </bkk> 对于fe ...

  10. Java对象多态性——对象的转型（引用类型之间的类型转换）

    Java引用变量有两个类型:编译时类型和运行时类型.编译时类型由声明该变量时使用的类型决定,运行时类型由实际赋给该变量的对象决定. 若编译时类型和运行时类型不一致,就出现多态 正常的方法调用(本态调用 ...