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. scipy几乎实现numpy的所有函数

    NumPy和SciPy的关系?   numpy提供了数组对象,面向的任何使用者.scipy在numpy的基础上,面向科学家和工程师,提供了更为精准和广泛的函数.scipy几乎实现numpy的所有函数, ...

  2. 二十二、正则表达式中的“r”含义

    '''r:Python中字符串前面加上 r 表示原生字符串(rawstring)不使用r,那么匹配时候需要4个反斜杠,正则需要转化一次,python解释器需要转化一次'''mm="c:\\a ...

  3. Maven install报错：MojoFailureException ，To see the full stack trace of the errors, re-run Maven with the -e switch.解决

    报错日志: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".SLF4J: Defaulting to ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_13_使用字节流读取中文的问题

    编码格式右下角显示是UTF-8 前三个字节是你,后三个字节是好.一个汉字占用了三个字节 读一个字节让编程char类型 文件里面后面加上abc abc没有问题 所以java提供字符流.字符流一次读取一个 ...

  5. Java ——String 类 StringBuffer 和 StringBuilder类 随机字符

    本节重点思维导图 String 类 创建字符串 String str = "I love ai"; 在代码中遇到字符串常量时,"I love ai",编译器会使 ...

  6. Java RPC 分布式框架性能大比拼，Dubbo排老几？

    来源:http://985.so/aXe2 Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成 ...

  7. Greg and Array CodeForces 296C 差分数组

    Greg and Array CodeForces 296C 差分数组 题意 是说有n个数,m种操作,这m种操作就是让一段区间内的数增加或则减少,然后有k种控制,这k种控制是说让m种操作中的一段区域内 ...

  8. qt 保存文件为utf8

    转载:https://www.cnblogs.com/cppskill/p/7999800.html bool TdrawSvg::Save2File(char* _pcFullFileName) { ...

  9. Codeforces 1058C(思维+最大公因数)

    题面 传送门 分析 引理1:三角形的面积\(\times 2\)一定是整数 由坐标系中的三角形面积公式 \[S=\frac{1}{2}(x_1y_2+x_2y_3+x_3y_1-x_1y_3-x_2y ...

  10. js中return、return false 、return true各自代表什么含义

    return语句代表需要返回一个值,如果不需要就不需要使用return语句.都类似一个出口,return 可以结束方法体中 return后面部分代码的执行.return false 或者 return ...