精华内容
下载资源
问答
  • 主要介绍了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习...
  • offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的,为了实现值的准确获取,本文采用js代码实现下,有需求的朋友可以参考下哈
  • 之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下。
  • JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
  • offsetTop

    2020-05-06 18:20:15
    offsetTop:元素到offsetParent顶部的距离 offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body。如下图所示:获取child的offsetTop,图1...
    1. offsetTop:元素到offsetParent顶部的距离

    2. offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absolute,fixed),若祖宗都不符合条件,offsetParent为body。如下图所示:获取child的offsetTop,图1的offsetParent为father,图2的offsetParent为body。

    3. 注意:只有元素show(渲染完成)才会计算入offsetTop,若是中间有元素数据需要异步获取,会导致最终获取的offsetTop值偏小

    展开全文
  • top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight 等应用,大家可以参考下。
  • offsetLeft、offsetTop全面解析 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; } .box2 { width:200...

    offsetLeft、offsetTop全面解析

    一、第一个小例子

    
    <body>
    <style>
        body { margin:0;  }
        .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; }
        .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }
        .box3 { width:100px; height:100px; margin:100px; background:#999;}
    </style>
    <div class="box1">
        <div class="box2">
        	<div class="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.querySelector('.box1');
        var oBox2 = document.querySelector('.box2');
        var oBox3 = document.querySelector('.box3');
    	
        console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);
        console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);
        console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
    </script>
    </body>
    

    ①第一个例子中,三个div的上一级的定位元素都是body,body是最外层的定位元素,三个div获取到的offsetLeft值跟offsetTop值都是相对于body的偏移量。

    二、第二个小例子(给box1添加相对定位)

    <body>
    <style>
        body { margin:0;  }
        .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative;}
        .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }
        .box3 { width:100px; height:100px; margin:100px; background:#999;}
    </style>
    <div class="box1">
        <div class="box2">
        	<div class="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.querySelector('.box1');
        var oBox2 = document.querySelector('.box2');
        var oBox3 = document.querySelector('.box3');
    	
        console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);
        console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);
        console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
    </script>
    </body>
    

    ②第二个例子中,box1加上了相对定位,这时候box2,box3的上一级定位元素不再是body了,这时他们获取到的offsetLeft值跟offsetTop值都是相对于box1的偏移量。而box1的上一级定位元素还是body,所以他的偏移量还是相对于body的。

    三、第三个小例子(给box1,box2添加相对定位)

    <body>
    <style>
        body { margin:0;  }
        .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }
        .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }
        .box3 { width:100px; height:100px; margin:100px; background:#999;}
    </style>
    <div class="box1">
        <div class="box2">
        	<div class="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.querySelector('.box1');
        var oBox2 = document.querySelector('.box2');
        var oBox3 = document.querySelector('.box3');
    	
        console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);
        console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);
        console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
    </script>
    </body>
    

    ③第三个例子中,box1跟box2都加上了相对定位,这时候,box3的上一级定位元素变成是box2,box2的上一级定位元素是box1,box1的上一级定位元素还是body。所以这时候就出现了。三个div的偏移量都为100;

    五、扩展(在第三个例子中,假如我想获取到box3到浏览器窗口的偏移量,该怎么去获取呢?)
    思路很简单,就是把元素本身的偏移量跟所有上级定位元素的偏移量都加起来就可以了,问题又来了,假如我们不知道他有几个上级定位元素呢?
    其实也不难。js不但提供了offsetLeft、offsetTop方法,还提供了offsetParent(获取上一级定位元素对象)的方法。所以现在我们只需封装一个函数就可以了。

    
    function offset(obj,direction){
        //将top,left首字母大写,并拼接成offsetTop,offsetLeft
        var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);
    		
        var realNum = obj[offsetDir];
        var positionParent = obj.offsetParent;  //获取上一级定位元素对象
    		
        while(positionParent != null){
    	realNum += positionParent[offsetDir];
    	positionParent = positionParent.offsetParent;
        }
        return realNum;
    }
    
    
    <body>
    <style>
        body { margin:0;  }
        .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }
        .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }
        .box3 { width:100px; height:100px; margin:100px; background:#999;}
    </style>
    <div class="box1">
        <div class="box2">
        	<div class="box3"></div>
        </div>
    </div>
    <script>
        var oBox1 = document.querySelector('.box1');
        var oBox2 = document.querySelector('.box2');
        var oBox3 = document.querySelector('.box3');
    		
        function offset(obj,direction){
            //将top,left首字母大写,并拼接成offsetTop,offsetLeft
    	var offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);
    		
    	var realNum = obj[offsetDir];
    	var positionParent = obj.offsetParent;  //获取上一级定位元素对象
    		
    	while(positionParent != null){
    	    realNum += positionParent[offsetDir];
    	    positionParent = positionParent.offsetParent;
    	}
    	return realNum;
        }
        console.log('box1: '+ offset(oBox1,'left') +','+ offset(oBox1,'top'));
        console.log('box2: '+ offset(oBox2,'left') +','+ offset(oBox2,'top'));
        console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top'));
    </script>
    </body>
    

    相关资源:【JavaScript】全面解析offsetLeft、offsetTop

    展开全文
  • ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各...
  • 首先:每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。 clientHeight和offsetHeight属性表示元素的高度,和元素的滚动、位置没有关系...

    MDN文档

    首先:每个HTML元素都具有clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这5个和元素高度、滚动、位置相关的属性。

    clientHeight和offsetHeight属性表示元素的高度,和元素的滚动、位置没有关系。

    返回值未因浏览器区别存在差异的属性:

    clientHeight、clientWidth、

    offsetHeight、offsetWidth、offsetTop、offsetLeft、offsetRight、offsetBottom、

    返回值是number类型的属性:

    clientHeight、clientWidth、

    offsetHeight、offsetWidth、offsetTop、offsetLeft、offsetRight、offsetBottom、

    注:number类型的返回值是经过四舍五入之后的值,即如果实际的值是400.2,得到的最终结果是400而不是400.2,如果实际的值是400.6,得到的最终结果是400而不是401。如果要获取实际大小而非四舍五入之后的值,可以用getBoundingClientRect来获取,MDN文档链接getBoundingClientRect

    返回值是string类型的属性,即带px:

     

    详解:

    参考的文章是这里,参考的这篇文章大部分没问题,但存在些小问题,所以自己还是打算完整的写一篇。

    先上神图(注:图的部分属性的标注并未考虑到浏览器之间的差异性,以及相关值获取到的前提条件,描述的不够准确和完整,需要配合文字结合起来理解):

     

    offsetTop

    offsetTop是原生JS的方法,它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量。参考的文章在这里。其它的offsetLeft、offsetRight、offsetBottom同理。

    关键词:(参考的对象是)祖先(不一定是父元素,一直往上找)元素、离自己最近、position不为static(static是position的默认值,如果一个元素不设置position,默认是static定位,因此offsetTop所参考的对象的position必须是relative,absolute,fixed中的一个)

    返回值类型:number,不带px单位

     

    offsetHeight

    offsetHeight:获取目标元素的自身高度,包括padding、border、水平滚动条的高度,但不包括margin的元素的高度。对于inline的元素(即行内元素)这个属性一直是0,单位px(注:返回值是不带px单位,类型为number)只读元素。

    HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。

    对于文档的body对象,它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。 

    如果元素被隐藏(例如 元素或者元素的祖先之一的元素的style.display被设置为none),则返回0

    参考文章在这里。offsetWidth相关在这里

    关键词:padding、border、水平滚动条的高度

    返回值类型:number,不带px单位

    浏览器差异:

    由于之前有文章说该属性的返回值在不同浏览器间返回值有差异,特地实测:ie9/10/11、chrome、Firefox返回值一致,并无差异。

    Image:Dimensions-offset.png

    Image:Dimensions-offset.png

    clientHeight

    目标元素的内容可视区域的高度,包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline(行内)的元素这个属性一直是0(number类型),单位px,只读元素。参考文章在这里

    å¾çæè¿°

    关键词:可视区域、包括padding、不包括border、水平滚动条高度、margin

    返回值类型:number,不带px单位

    浏览器差异:

     

    展开全文
  • offsetTop、offsetLeft赋值给变量后,当布局发生改变,变量的值竟然变化了!请问如何解决?
  • 因需要定位某个HTML元素(例如:div)距离页顶的高度,想用offsetTop来取值,结果却发现CSS中如果使用了float:left;之类的写法后,竟然会导致取到的值不一样。 没有使用float:left;取的到值是正常值200; <!DOCTYPE...
  • offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标  event.offsetX 相对容器的水平坐标  event.offsetY ...

    TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
    scrollHeight: 获取对象的滚动高度。 
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
    scrollWidth:获取对象的滚动宽度 
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
    event.clientX 相对文档的水平座标 
    event.clientY 相对文档的垂直座标 
    event.offsetX 相对容器的水平坐标 
    event.offsetY 相对容器的垂直坐标 
    document.documentElement.scrollTop 垂直方向滚动的值 
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

    这里是JavaScript中建造迁移转变代码的常用属性
    页可见区域宽: document.body.clientWidth;
    网页可见区域高: document.body.clientHeight;
    网页可见区域宽: document.body.offsetWidth   (包含边线的宽);
    网页可见区域高: document.body.offsetHeight (包含边线的宽);
    网页正文全文宽: document.body.scrollWidth;
    网页正文全文高: document.body.scrollHeight;
    网页被卷去的高: document.body.scrollTop;
    网页被卷去的左: document.body.scrollLeft;
    网页正文项目组上: window.screenTop;
    网页正文项目组左: window.screenLeft;
    屏幕辨别率的高: window.screen.height;
    屏幕辨别率的宽: window.screen.width;
    屏幕可用工作区高度: window.screen.availHeight;

    1、offsetLeft

    假设 obj 为某个 HTML 控件。

    obj.offsetTop 指 obj 间隔上方或上层控件的地位,整型,单位像素。

    obj.offsetLeft 指 obj 间隔左方或上层控件的地位,整型,单位像素。

    obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

    obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

    我们对前面提到的“上方或上层”与“左方或上层”控件作个申明。

    例如:

    <div id="tool">

    <input type="button" value="提交">

    <input type="button" value="重置">

    </div>

    “提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的间隔,因为距其上边比来的是 “tool” 层的上边框。

    “重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的间隔,因为距其上边比来的是 “tool” 层的上边框。

    “提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的间隔,因为距其左边比来的是 “tool” 层的左边框。

    “重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的间隔,因为距其左边比来的是“提交”按钮的右边框。

    以上属性在 FireFox 中也有效。

    另 外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不合浏览器中有不合申明(实际上大多半景象是因为对 document.body 申明不合造成的,并不是因为对 offset 申明不合造成的),点击这里查看不合点。

    题目:offsetTop 与 style.top 的差别

    筹办常识:offsetTop、offsetLeft、offsetWidth、offsetHeight

    我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位,style.top 也是可以的,二者的差别是:

    一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

    二、offsetTop 只读,而 style.top 可读写。

    三、若是没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

    offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样事理。

    题目:clientHeight、offsetHeight和scrollHeight

    我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,这里说的是 document.body,若是是 HTML 控件,则又有不合,点击这里查看。

    这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

    2、clientHeight

    clientHeight

    大师对 clientHeight 都没有什么贰言,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。

    offsetHeight

    IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。

    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

    scrollHeight

    IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

    NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

    简单地说

    clientHeight 就是透过浏览器看内容的这个区域高度。

    NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于便是 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

    IE、Opera 认为 offsetHeight 是可视区域 clientHeight 迁移转变条加边框。scrollHeight 则是网页内容实际高度。

    同理

    clientWidth、offsetWidth 和 scrollWidth 的申明与上方雷同,只是把高度换成宽度即可。

    然则

    FF 在不合的 DOCTYPE 中对 clientHeight 的申明不合, xhtml 1 trasitional 中则不是如上申明的。其它浏览器则不存在此题目。

    题目:scrollTop、scrollLeft、scrollWidth、scrollHeight

    3、scrollLeft

    scrollTop 是“卷”起来的高度值,示例:

    <div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">

    <div style="width:50px;height:300px;background-color:#0000FF;" id="t">若是为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>

    </div>

    <script type="text/javascript">

    var p = document.getElementById("p");

    p.scrollTop = 10;

    </script>

    因为为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。

    scrollLeft 也是类似事理。

    我们已经知道 offsetHeight 是自身元素的宽度。

    而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐蔽的项目组。

    上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

    scrollWidth 也是类似事理。

    IE 和 FireFox 周全支撑,而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft(document.body 除外)。

    揭晓时候:2007-10-15 20:20:16

    题目:offsetTop、offsetLeft、offsetWidth、offsetHeight

    4、clientLeft

    返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的间隔,可以懂得为边框的长度

    一向以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个办法很含混,花了一天的时候好好的进修了一下.得出了以下的成果:

    1.offsetTop     :

    当前对象到其上级层顶部的间隔.

    不克不及对其进行赋值.设置对象到页面顶部的间隔请用style.top属性.

    2.offsetLeft :

    当前对象到其上级层左边的间隔.

    不克不及对其进行赋值.设置对象到页面左部的间隔请用style.left属性.

    3.offsetWidth :

    当前对象的宽度.

    与style.width属性的差别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值

    4.offsetHeight :

    与style.height属性的差别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不合页面中对象的高度值而不是百分比值

    5.offsetParent   :

    当前对象的上级层对象.

    重视.若是对象是包含在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有题目.

    哄骗这个属性,可以获得当前对象在不合大小的页面中的绝对地位.

    获得绝对地位脚本代码

    1function GetPosition(obj)

    2{

    3 var left = 0;

    4 var top   = 0;

    5

    6 while(obj != document.body)

    7 {

    8        left = obj.offsetLeft;

    9        top   = obj.offsetTop;

    10

    11        obj = obj.offsetParent;

    12 }

    13

    14 alert("Left Is : " + left + "\r\n" + "Top   Is : " + top);

    15}

    6.scrollLeft :

    对象的最左边到对象在当前窗口显示的局限内的左边的间隔.

    便是在呈现了横向迁移转变条的景象下,迁移转变条拉动的间隔.

    7.scrollTop

    对象的最顶部到对象在当前窗口显示的局限内的顶边的间隔.

    便是在呈现了纵向迁移转变条的景象下,迁移转变条拉动的间隔.

    我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明,这里说的是 document.body,若是是 HTML 控件,则又有不合,点击这里查看。

    这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

    clientHeight

    大师对 clientHeight 都没有什么贰言,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。

    offsetHeight

    IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。

    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

    scrollHeight

    IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

    NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

    简单地说

    clientHeight 就是透过浏览器看内容的这个区域高度。

    NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于便是 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

    IE、Opera 认为 offsetHeight 是可视区域 clientHeight 迁移转变条加边框。scrollHeight 则是网页内容实际高度。

    同理

    clientWidth、offsetWidth 和 scrollWidth 的申明与上方雷同,只是把高度换成宽度即可。

     

     

     

    参考文章: 
    http://www.jb51.net/article/90185.htm 
    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考,具体如下:

    一、Js代码:

    onload = function () {
      //初始化
      scrollToLocation();
    };
    function scrollToLocation() {
      var mainContainer = $('#thisMainPanel'),
      scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
      //scrollToContainer = mainContainer.find('.son-panel:eq(5)');//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
      //非动画效果
      //mainContainer.scrollTop(
      //  scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
      //);
      //动画效果
      mainContainer.animate({
        scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
      }, 2000);//2秒滑动到指定位置
    }

    二、Html代码:

    <div id="thisMainPanel" style="height:200px;overflow-y: scroll;border:1px solid #f3f3f3;">
        <div class="son-panel">我是类容区域-1</div>
        <div class="son-panel">我是类容区域-2</div>
        <div class="son-panel">我是类容区域-3</div>
        <div class="son-panel">我是类容区域-4</div>
        <div class="son-panel" style="height:160px;">我是类容区域-5</div>
        <div class="son-panel">我是类容区域-6</div>
        <div class="son-panel">我是类容区域-7</div>
        <div class="son-panel">我是类容区域-8</div>
    </div>

    三. 相关知识

    javascript中制作滚动代码的常用属性

    1.网页可见区域宽: document.body.clientWidth; 
    网页可见区域高: document.body.clientHeight; 
    网页可见区域宽: document.body.offsetWidth (包括边线的宽); 
    网页可见区域高: document.body.offsetHeight (包括边线的宽); 
    网页正文全文宽: document.body.scrollWidth; 
    网页正文全文高: document.body.scrollHeight; 
    网页被卷去的高: document.body.scrollTop; 
    网页被卷去的左: document.body.scrollLeft; 
    网页正文部分上: window.screenTop; 
    网页正文部分左: window.screenLeft; 
    屏幕分辨率的高: window.screen.height; 
    屏幕分辨率的宽: window.screen.width; 
    屏幕可用工作区高度: window.screen.availHeight;

    2.假设 obj 为某个 HTML 控件。

    obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。 
    obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。 
    obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。 
    obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

    我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。 
    例如:

    <div id=”tool”>
    <input type=”button” value=”提交”>
    <input type=”button” value=”重置”>
    </div>
    • “提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。 
      “重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离,因为距其上边最近的是 “tool” 层的上边框。 
      “提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离,因为距其左边最近的是 “tool” 层的左边框。 
      “重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离,因为距其左边最近的是“提交”按钮的右边框。

    以上属性在 FireFox 中也有效。

    3.offsetTop 与 style.top 的区别

    预备知识:offsetTop、offsetLeft、offsetWidth、offsetHeight 
    我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

    (1)offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。 
    (2)offsetTop 只读,而 style.top 可读写。 
    (3)如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

    offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。 
    offsetWidth与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

    4.scrollLeft : 
    对象的最左边到对象在当前窗口显示的范围内的左边的距离. 
    即是在出现了横向滚动条的情况下,滚动条拉动的距离. 
    scrollTop 
    对象的最顶部到对象在当前窗口显示的范围内的顶边的距离. 
    即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

    展开全文
  • offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event....
  • //获取坐标位置 function getpos(e){ var t=e.offsetTop; var l=e.offsetLeft; var height=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft;
  • scrollTop和offsetTop区别

    2021-02-20 09:46:22
    offsetTop指的是此元素与有定位的父元素的顶部距离,一般为定值。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
  • offsetTop是找到元素相对于父级定位元素的距离 如果父级有position:relative 获取到的offsetTop是相对于定位了的父级元素的距离 用Element.getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合...
  • offsettop的用法

    2020-02-16 15:15:51
    offsettop的用法,作用是获取一个元素到顶部的距离,做吸顶可以用offsettop获取到顶部的距离
  • 【JavaScript】全面解析offsetLeft、offsetTop

    万次阅读 多人点赞 2018-05-26 16:18:12
    前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗? 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300...
  • 在哪里才能获取到正确的 offfsetTop? 1.created 肯定不行,压根通过 this.$refs 获取不到元素 ...在图片都加载完毕后获取元素的 offsetTop, 这里注意防抖函数的应用 普通 元素用的是 this.$refs.元...
  • 关于offsetTop的误解

    2019-10-02 21:26:09
    在做li的搜索的定位的时候,为了得到li相对于ul的距离,本来也可以用li的高度相乘,但是用了offsetTop,可是用上后发现得到的值怎么都不对,最后在控制台找到他的offsetParent竟然不是ul,跑到了另外一个元素上面, ...
  • offsetTop的父级元素

    2020-04-13 18:19:49
    offsettop的offsetparent是最近的设置了定位属性的父级元素,如果父级元素都没有定位属性,那么offsetparent就是body并不是html标签。 offsettop是指元素到设置有定位属性的父级元素(offsetParent)的距离,如果没有...
  • document.getElementById(id).offsetTop 不等于$(selecter).offset().left 后者更接近与真实值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,398
精华内容 18,959
关键字:

offsettop