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. loadrunner常用函数整理

    1.int web_reg_save_param("参数名","LB=左边界","RB=右边界",LAST);   //注册函数,在参数值出 ...

  2. mysqlbinlog读懂binlog

    binlog 报unknown variable 'default-character-set=utf8' 方法1: 在/etc/my.cnf 中将default-character-set=utf8 ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第1节 继承_1_继承的概述

    继承,不要按照父亲和儿子的关系去理解,父亲有100快.那么大儿子就有50 小儿子也50 ,他是对半的 这里要按照师傅和徒弟的关系去理解.师傅会九阴真经 那么徒弟也会九阴真经 程序中的继承 讲师和助教有 ...

  4. 【SD系列】SAP SD模块-公司间销售简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[SD系列]SAP SD模块-公司间销售简介   ...

  5. sql 语句 的一些优化小总结

    1.用exists 代替 in 原理:exists 是存在一个即返回一个 而in是做全盘扫描得出所有条件内的数据 (高效) and exists (select 'x' from Person whe ...

  6. 排序算法六：计数排序（Counting sort）

    前面介绍的几种排序算法,都是基于不同位置的元素比较,算法平均时间复杂度理论最好值是θ(nlgn). 今天介绍一种新的排序算法,计数排序(Counting sort),计数排序是一个非基于比较的线性时间 ...

  7. Trie字典树详解

    今天上午省选字符串......只会KMP.连hash都不会的我被大佬虐惨了......于是我要发奋图强学习字符串,学习字符串当然就要从Trie树这种可爱的数据结构开始啦!!! 一.什么是Trie树?? ...

  8. Django之视图(V)

    Django的View(视图) 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  9. 用户权限管理数据库设计（RBAC）

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  10. Java使用POI读取和写入Excel指南（转）

    做项目时经常有通过程序读取Excel数据,或是创建新的Excel并写入数据的需求: 网上很多经验教程里使用的POI版本都比较老了,一些API在新版里已经废弃,这里基于最新的Apache POI 4.0 ...