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. Wowza 4 vod 录播多层目录无法播放问题

    找到一个解决方案,但是无法下载zip包 https://stackoverflow.com/questions/21303361/how-to-stream-mp4-files-from-subdir ...

  2. clojure 语法

    Clojure 是一种运行在 Java 平台上的 LISP 方言,LISP 是一种以表达性和功能强大著称的编程语言. ; 分号作为注释的开始 ; clojure 用括号把元素括起来,元素之间用空格隔开 ...

  3. leetcode-mid-array-73 set matrix zeros

    mycode 空间复杂度 m+n 思路:用set把为0元素所在行.列记录下来 注意:注释的方法更快 class Solution(object): def setZeroes(self, matrix ...

  4. Maven的一些常用命令

    将本项目的源码部署到本地仓库 mvn clean source:jar install 将本地jar包部署到本地仓库,首先将jar包放在当前目录下,然后执行,这样做比直接把jar包copy到本地仓库更 ...

  5. Delphi XE2 之 FireMonkey 入门(2)

    FireMonkey 的控件都是自己绘制的(而不是基于系统组件), 我想它们应该是基于一些基本图形; 就从基本图形开始吧. FMX.Objects 单元给出的类: TShape //基本图形的基类 T ...

  6. GMSSL在Window下的编译

    因为工作需要用到SM2算法加解密,网络上找一圈,没有合用的,还被骗了一堆积分. 无奈只得自行编译,从GITHUB的GMSSL下载到最新的SSL库,VS2012下编译踩了不少坑,记录一下 GITHUB链 ...

  7. Android Studio 连接夜神模拟器

    网上找到的解决是需要我们 然后运行cmd命令,cd到夜神安装目录,执行命令 nox_adb.exe connect 127.0.0.1:62001

  8. Jmeter+ SeureCRT + Pinpoint

    1.环境配置 [相关操作] 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  9. 《好久不见》（Cover 陈奕迅）箫声远 洞箫

    Your browser does not support the audio element.

  10. IDEA Maven project: 'xxx/pom.xml' already exists in VFS

    Failed to create a Maven project: 'xxx/pom.xml' already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误 ...