设置div 居中 和得到dom元素高度

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>

原文地址:https://www.cnblogs.com/jiangfeilong/p/11185104.html

时间: 2024-10-27 03:58:29

设置div 居中 和得到dom元素高度的相关文章

javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH

设置div的宽度为父元素的百分比,高度为宽度的百分比

body { margin: 0 auto; width: 100%; /*清除display:inline-block元素换行符间隙*/ font-size: 0; text-align: center; } div { display: inline-block; width: 20%; background: green; font-size: 12px; position: relative; vertical-align: middle; } div:before { content:

CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8&q

设置div居中

<div id="loadingDiv" class="loadingDiv" style="position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2;display: none"> <div id="center" style="position:absolute;"> <table bor

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

HTML DOM元素的Dragdrop

在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的javascript库(Jquery插件等).在HTML5已经将这一特性引入,提供原生的支持,不用再借助第三方的javascript库.现代化的程序设计中,各种前端库的引入(Jquery, nodejs, ract, angularjs),提高了开发效率,而各自的库也有相应的插件来处理dragdrop,

DIV居中以及设置隐藏的几种方式

PartI DIV居中的常用方法: 1)text-align:center方式 --------------------------html----------------------------- <div class="demo1"> <div class="text1">demo</div> </div> --------------------------css-------------------------

【温故而知新-Javascript】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleSheet 对象代表,它提供了一组属性和方法来操作文档里的样式. 1.1 获得样式表的基本信息 第一步是获得定义在文档中的样式表的一些基本信息. <!DOCTYPE html> <html lang="en"> <head> <meta charse

【使用 DOM】为DOM元素设置样式

1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>为DOM元素设置样式</title> <style title="core st