HTML精确定位之位置参数乱炖一锅

一、前言

　　公司项目，需要在一个图片的右上角放置一个类似“X”的东西（其实是需要显示一个数字，就像微信一样，在右上角显示几个消息），然后需要用到html的定位，看了几个网上的例子，恍惚间看到了一个offset，好奇心驱使，去查了一下html的offset，居然“拔出萝卜带出泥”（理解字面意思就行），居然搂出一箩筐的东西，不深究一下心里直痒痒（好奇心害死猫~），所以网上到处查，但是看来看去，刚看出一点眉目，别人评论我看的文章说“说的不对，误人子弟”，自此网上陷入“罗生门”，没办法，只能挽起裤脚，脱掉鞋子，下泥塘自己摸鱼~最终在https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement找到相应的英文解释，然后自己手动敲了一些代码，再结合网上一些帖子，算是比较清晰的理解了接下来需要解释的一些概念，这边顺便记录一下，希望对看官也有所帮助，分享是一种情怀~

二、位置参数

　　在解释各个位置参数之前，先来一张网上流传甚广的一张图~

1、scrollHeight：内容的实际高度，不管是否已经用纵向滚动条浏览过，只读

　　The Element.scrollHeight read-only attribute is a measurement of the height of an element‘s content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum height (where height includes padding but does not include border and margin) the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.
语法：
var intElemScrollHeight = element.scrollHeight;

2、scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过，只读

    The Element.scrollWidth read–only property returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.
语法：
var xScrollWidth = element.scrollWidth;

3、scrollTop：用纵向滚动条已经滚过的高度，可读可写

    The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element‘s scrollTop is a measurement of the distance of an element‘s top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.

语法：// Get the number of pixels scrolled var  intElemScrollTop = someElement.scrollTop;

// Set the number of pixels scrolled element.scrollTop = intValue;

4、scrollLeft：用横向滚动条已经滚过的宽度，可读可写

    The Element.scrollLeft property gets or sets the number of pixels that an element‘s content is scrolled to the left.
    Note that if the element‘s direction of the element is rtl (right-to-left) then scrollLeft is 0 when the scrollbar is at its rightmost position (at start of the scrolled content) and then increasingly negative as you scroll towards the end of the content. 语法：
 // Get the number of pixels scrolled
 var sLeft = element.scrollLeft;
 // Set the number of pixels scrolled
 element.scrollLeft = 10;

（元素未滚过部分(高) = scrollHeight - scrollTop - clientHeight;元素未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth;）

5、offsetHeight：border+padding+horizontal scrollbar+height(CSS)，只读

　 The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.
   Typically, an element‘s offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
    In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".
    This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)语法：
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

6、offsetWidth：border+horizontal padding+vertical scrollbar+width(CSS)，只读

    The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element‘s offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.　　In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.positionof the element itself is set to "fixed".　　This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)
语法：
var offsetWidth =element.offsetWidth;

7、offsetTop：当前节点的左上角相对于offsetParent的内侧，在Y轴（以offsetParent左上角为原点，向下为Y轴正方向，向右为X轴正方向）的偏移量，只读

    The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
    topPos is the number of pixels from the top of the closest relatively positioned parent element.
    In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".
    This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)
语法：
var topPos = element.offsetTop;

8、offsetLeft：当前节点的左上角相对于offsetParent的内侧，在X轴（以offsetParent左上角为原点，向下为Y轴正方向，向右为X轴正方向）的偏移量，只读

    The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
    For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
    However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use Element.getBoundingClientRect() to get its position). Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.　　In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.positionof the element itself is set to "fixed".　　This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)
语法：var left = element.offsetLeft;

9、clientHeight：元素内部高度，即内容可视区域的高度，包含padding，但是剔除margin和border以及水平滚动条的高度，只读

    The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it‘s  the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
    clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).语法：var h = element.clientHeight;

10、clientWidth：元素内部宽度，即内容可视区域的宽度，包含padding，但是剔除margin和border以及竖直滚动条的宽度，只读

    The Element.clientWidth property is zero for elements with no CSS or inline layout boxes, otherwise it‘s the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.语法：var intElemClientWidth = element.clientWidth;

11、clientTop：The width of the top border of an element in pixels，只读

    The width of the top border of an element in pixels. It does not include the top margin or padding. clientTop is read-only.
    Gecko-based applications support clientTop starting with Gecko 1.9 (Firefox 3, implemented in bug 111207). This property is not supported in Firefox 2 and earlier.语法：var top = element.clientTop;

12、clientLeft：见英文解释，这边需要说明一下，当文字从右到左显示的时候，竖直滚动条可以在左边，此时clientLeft=border+left vertical scrollbar，只读

    The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only.
    Gecko-based applications support clientLeft starting with Gecko 1.9 (Firefox 3, implemented in bug 111207). This property is not supported in Firefox 2 and earlier.
    When layout.scrollbar.side preference is set to 1 or to 3 and when the text-direction is set to RTL, then the vertical scrollbar is positioned on the left and this impacts the way clientLeft is computed.语法：var left = element.clientLeft;

三、附录一

JS OffsetParent属性深入解析

　　offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

　　句法：
　　　　parentObj = element.offsetParent

　　变量：
　　　　parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
　　<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<script type="text/javascript" language="JavaScript">
  　　　　function offset_init() {
  　　　　var pElement = document.getElementById("sonObj");
  　　　　　　parentObj = pElement.offsetParent;
  　　　　　　alert(parentObj.tagName);
    　　　}
　　　　</script>
　　　　</head>
　　　　<body onload="offset_init()">
　　　　　　<div id="parent">
　　　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　　　</div>
　　　　</body>
　　</html>

　　测试结果：

Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY

结论：当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

　　测试代码2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<style type="text/css">
　　　　　　#parent {
    　　　　　　position: absolute; <!-- position：relative; -->
    　　　　　　left: 25px;
    　　　　　　top: 188px;
    　　　　　　border: 1px solid black;
　　　　　　}
　　　　</style>
　　　　<script type="text/javascript" language="JavaScript">
    　　　　function offset_init() {
　　　　　　　　var pElement = document.getElementById("sonObj");
　　　　　　　　parentObj = pElement.offsetParent;
　　　　　　　　alert(parentObj.tagName);
    　　　　}
　　　　</script>
　　</head>
　　<body onload="offset_init()">
　　　　<div id="parent">div测试代码
　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　</div>
　　</body>
</html>

测试结果：

Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"

结论：当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素

　　测试代码3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
　　<head>
　　　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　　　<title>Untitled Document</title>
　　　　<style type="text/css">
　　　　　　#Grandfather {
    　　　　　　position: relative;
    　　　　　　left: 25px;
    　　　　　　top: 188px;
    　　　　　　border: 1px solid black;
　　　　　　}
　　　　</style>
　　　　<script type="text/javascript" language="JavaScript">
　　　　　　function offset_init() {
　　　　　　　　var pElement = document.getElementById("sonObj");
　　　　　　　　parentObj = pElement.offsetParent;
　　　　　　　　alert(parentObj.tagName);
    　　　　}
　　　　</script>
　　</head>
　　<body onload="offset_init()">
　　　　<h1 id="Grandfather">
　　　　　　<div id="parent">
　　　　　　　　<p id="sonObj">测试OffsetParent属性</p>
　　　　　　</div>
　　　　</h1>
　　</body></html>

测试结果：

Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"

结论：当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

四、引用/参考

https://developer.mozilla.org/en-US/docs/Web/API/Element

http://www.mamicode.com/info-detail-646876.html

http://www.cnblogs.com/quanhai/archive/2010/04/19/1715231.html

http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

http://zhidao.baidu.com/link?url=q3c1Am2o9VMNaIZ5ZBK_yc8RGg6OiC9eDuhQ1Nx3agdKr7Z0C6UeJ2WtHn9697goUOfQ9O8xtU_nZfub5ZKHpIwI8fvdjuMGNY19ufQmmPK

时间： 2024-10-21 18:59:21

HTML精确定位之位置参数乱炖一锅的相关文章

window.location.hash 页面跳转，精确定位，实例展示：

window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template" type="text/x-dot-template"> <a title="点击查看宝贝详情" href="<?php echo APP_WEB_INDEX_ROOT?>/item/itemdetail<?php echo

JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位

浏览器的宽高示意图: JavaScript中常用的方法: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scr

SIFT算法原理（2）-极值点的精确定位

在SIFT解析(一)建立高斯金字塔中,我们得到了高斯差分金字塔: 检测DOG尺度空间极值点 SIFT关键点是由DOG空间的局部极值点组成的.以中心点进行3X3X3的相邻点比较,检测其是否是图像域和尺度域的相邻点的极大值或极小值. (1)为了确保不是噪声我们先进型阈值二值化: n和S一样,你想提取多少个图片的特征:(n)S表示每组提取多少层 (2)在差分金字塔中找极值点 特征点是由DOG空间的局部极值点组成的.为了寻找DoG函数的极值点,每一个像素点要和它所有的相邻点比较,看其是否比它的图像域和尺

用XPath精确定位节点元素&amp;selenium使用Xpath定位之完整篇

在利用XSL进行转换的过程中,匹配的概念非常重要.在模板声明语句 xsl:template match = ""和模板应用语句xsl:apply-templates select = "" 中,用引号括起来的部分必须能够精确地定位节点.具体的定位方法则在XPath中给出. 之所以要在XSL中引入XPath的概念,目的就是为了在匹配XML文档结构树时能够准确地找到某一个节点元素.可以把XPath比作文件管理路 径:通过文件管理路径,可以按照一定的规则查找到所需要的文件

如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置.通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点. 在详细介绍之前,我们先简要的说明一下定位的4种方法: 1.静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置.所以没有什么需要特殊说的. 2.绝对定位(absolute):这种方法允许用户指定元素的左上角.右下角或者其他的参考点和

网页开发一个div相对于另外一个div的精确定位的问题（以象棋的布局为例）

在网页开发的过程中,我们在布局上基本上都会采用div+css的形式,虽然css里面的百分号可以满足我们的div会相对于浏览器的大小发生变化,但是如果我要让一个多个div相对于一个div进行精确的定位,那么这个方法就有些吃力了,我最近再写一个网络象棋对战平台,就遇到了这个问题,就是如何让我的棋子(图片)精确地位于棋盘(图片)的相应的额精确位置呢?一开始,我也是想到了css的百分号定义,然后发现这个实现太难了,于是我最后采用的是javascript脚本,ok,先看一下我们的基本素材,这里有一个我自己

C程序bug精确定位

本文主要介绍如何利用C标准宏定义(__FILE__, __FUNCTION__, __LINE__)结合assert来更精确的定位导致assert的出错点.尤其在带有深层的函数嵌套调用的复杂程序中,使用__FILE__, __FUNCTION__, __LINE__这3个工具在追踪模糊不清的bug时非常重要. 宏assert的原型定义在头文件<assert.h>中,其作用是如果测试的条件返回错误(即测试等于0),则终止程序执行. 原型定义如下: #include<assert.h>

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLeft:设置或获取位于对象左边界和窗体中眼下可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗体中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offset