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. 重新理解了重定向，利用重定向可以防止用户重复提交表单（兼谈springmvc重定向操作）

    自己用springmvc框架有一段时间了,但是都还一直分不清楚什么时候应该用转发,什么时候应该用重定向.可能用转发的情形太多了,以致于自己都忘记了还有重定向. 当用户提交post请求之后,刷新页面就会 ...

  2. 从 Quora 的 187 个问题中学习机器学习和NLP

    从 Quora 的 187 个问题中学习机器学习和NLP 原创 2017年12月18日 20:41:19 作者:chen_h 微信号 & QQ:862251340 微信公众号:coderpai ...

  3. codeforces 722F - Cyclic Cipher

    题目链接:http://codeforces.com/problemset/problem/722/F ------------------------------------------------ ...

  4. vue +ts 在router的路由中import报错的解决方案

    在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...

  5. C# winform 键盘全局事件

    本文转载自:http://www.cnblogs.com/yukaizhao/archive/2010/12/14/winform_keyup.html 在winform程序中给form添加了keyu ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_08 转换流_6_练习_转换文件编码

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_5_File类获取功能的方法

    获取的方法 GetAbsolutepath 传递一个相对路径进去,查看输出的结果 输出的还是绝对的路径 getPath 获取的就是构造方法中传递的路径,可以传递绝对路径也可以传递相对路径 实际上toS ...

  8. 接口自动化之提取响应结果（raw、json）

    做接口测试时,我们一般会取得响应结果的部分值,来与预期结果对比,做断言 目录 1.响应结果类型 2.json响应结果的提取 3.raw响应结果的提取 1.响应结果类型 通过fiddler的respon ...

  9. 接口自动化之ddt

    接口自动化会用到数据驱动模式,也就是一个ddt模块 目录 1.环境准备 2.调用时标准格式 3.应用(结合excle来传值) 1.环境准备 首先,需要安装ddt模块 pip install ddt 2 ...

  10. 合并流SequenceInputStream

    合并流 SequenceInputStream概述 SequenceInputStream类可以将多个输入流串流在一起,合并为一个输入流,因次,该流也称为合并流. SequenceInputStrea ...