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. navigation ObtacleCostFunction源码分析

    ObtacleCostFunction 定义了一个ObstacleCostFunction类,继承自Trajectory类,Trajectory类有8个类参 总共有8个类参 double xv_,yv ...

  2. Sublime如何设置背景透明

    Sublime如何设置背景透明 下载sublime 透明背景插件 我用的是git下载插件: git clone https://github.com/vhanla/SublimeTextTrans.g ...

  3. 了解SELlinux

    selinux是mac: mandatory access control. 强制访问控制. 是经过了20年的mac研究基础上开发的安全子系统. 访问控制分为三种: dac: di'scretiona ...

  4. 013-Spring Boot web【二】静态资源、Servlet、Filter、listenter

    一.静态资源 1.1.webapp默认支持静态资源 在src/main/webapp下建立user.html默认支持访问 1.2.默认内置静态资源目录.可被直接访问 查看包:spring-boot-a ...

  5. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_09 序列化流_4_transient关键字_瞬态关键字

    不想被序列化的成员变量用 transient修饰 age加上static关键字 反序列化age就读取不到正确的值了

  6. 解决Chrome网页编码显示乱码的问题

    解决Chrome网页编码显示乱码的问题 记得在没多久以前,Google Chrome上面出现编码显示问题时,可以手动来调整网页编码问题,可是好像在Chrome 55.0版以后就不再提供手动调整编码,所 ...

  7. 类TreeMap

    TreeMap类 import java.util.Set; import java.util.TreeMap; public class IntegerDemo { public static vo ...

  8. Python3之异常处理

    写自动化脚本时经常会用到异常处理,下面将python中的异常处理做一整理: 注意:以下所有事列中的111.txt文件不存在,所以会引起异常 用法一:try...except...else..类型 1. ...

  9. centos yum 安装php5.6

    centos yum 安装php5.6 卸载 php之前的版本: yum remove -y php-common 配置源 CentOS 6.5的源 rpm -Uvh http://ftp.iij.a ...

  10. layer最大化、最小化、还原回调方法

    layer.open({            type: 1,             title: ‘在线调试‘,            content: ‘这里是内容‘,            ...