offsetTop和scrollTop的差别

近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下:

一直以来对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
对象的最顶部到对象在当前窗体显示的范围内的顶边的距离.
即是在出现了纵向滚动栏的情况下,滚动栏拉动的距离.

 

8.測试offsetTop和scrollTop的html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
 function test(){
  var oIframe = document.getElementById("div1");
  alert(oIframe.offsetTop);
  alert(oIframe.scrollTop);
 }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY style="border:1px red solid;padding:20px;margin:0px;">
 <div id="div1" style="border:1px blue solid;height:400px;width:200px;overflow:auto">
 <iframe id="iframe1" src="http://www.baidu.com" width="400" height="500" style="border:1px red solid;" scrolling="no">
 </iframe>
 </div>
 <input type="button" value="OK" οnclick="test()"/>
 </BODY>
</HTML>
<script type="text/javascript" ></script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

quartz (一) 基于 Quartz 开发企业级任务调度应用

本文转自&#xff1a;http://www.ibm.com/developerworks/cn/opensource/os-cn-quartz/ Quartz 基本概念及原理 Quartz Scheduler 开源框架 Quartz 是 OpenSymphony 开源组织在任务调度领域的一个开源项目&#xff0c;完全基于 Java 实现。该项目于 2009 年被 Terracotta 收购&…

C# 11 中的参数 null 检查

C# 11 中的参数 null 检查IntroC# 11 将引入一个新的操作符 !! 来简化我们代码中的对于参数的 null 检查&#xff0c;昨天发布的 .NET 7 Preview 1 已经支持了这一语法&#xff0c;感兴趣的不妨来试一下吧&#xff0c;下面我们就来看一下如何使用吧Prepare如果你想在本地代码中…

cms的 php代码,KingCMS/PHP可执行代码

实例:Example :{king:title/}{king:content/}作者:{king:_author/}上面的代码没有什么特别的地方&#xff0c;但客户的要求有了变化&#xff0c;他想在详细页的内容开始前调用缩略图&#xff0c;没有则忽略。所以问题也来了&#xff0c;因为有的文章有缩略图&#xff0c;有的没…

CentOS单机安装k8s并部署.NET 6程序

学习云原生&#xff0c;k8s 是一个基础&#xff0c;为了做一些实验&#xff0c;单机部署是最方便的&#xff0c;下面将介绍在 CentOS 中单机安装 k8s &#xff0c;并将一个 .NET 6 的程序发布到 k8s 中。环境宿主机&#xff1a;Mac 10.15.7CentOS版本&#xff1a;7.6内存&#…

php session缓存,扫盲:php session缓存至memcached中的方法

memcached是一套分布式的快取系统&#xff0c;当初是DangaInteractive为了LiveJournal所发展的&#xff0c;但被许多软件(如MediaWiki)所使用。这是一套开放源代码软件&#xff0c;以BSDlicens更改为&#xff1a;session.save_handler memcachesession.save_path"tcp://12…

MASA Framework - DDD设计(2)

Clean Architecture国内对于Clean Architecture的翻译很多&#xff0c;干净/整洁/清晰。但无论哪一种都说明了它简洁、清晰的特性。早期它长这样看到这张图的同学可能会对另外一张图有印象洋葱架构(Onion)现在长这样看起来好像是亲戚&#xff0c;它们的确也有着千丝万缕的关系分…

SpringMVC核心分发器DispatcherServlet分析[附带源码分析]

目录 前言DispatcherServlet初始化过程DispatcherServlet处理请求过程总结参考资料前言 SpringMVC是目前主流的Web MVC框架之一。 如果有同学对它不熟悉&#xff0c;那么请参考它的入门blog&#xff1a;http://www.cnblogs.com/fangjian0423/p/springMVC-introduction.html 本…

WPF 展示视频修改为WriteableBitmap

WPF开发者QQ群&#xff1a;340500857由于微信群人数太多入群请添加小编微信号yanjinhuawechat 或 W_Feng_aiQ 邀请入群需备注WPF开发者 PS&#xff1a;有更好的方式欢迎推荐。接着上一篇&#xff0c;进行WriteableBitmap性能优化修改后运行对比如下&#xff1a;前&#xff08;C…

linux之类似Windows的资源管理器gnome-system-monitor(可用这个杀死进程)

1、使用 直接运行下面命令gnome-system-monitor 如果没有安装用下面命令安装sudo apt-get install gnome-system-monitor 2、结果 可以点击右键然后杀死相关进程&#xff0c;这也是杀死进程的办法。

HttpClient异常处理手册

HttpClient异常处理手册 开源中国 发表于 2014-08-26 19:44:06异常处理 HttpClient的使用者在执行HTPP方法&#xff08;GET,PUT,DELETE等&#xff09;&#xff0c;可能遇到会两种主要类型的异常&#xff1a; 传输异常协议异常并不是所有的异常都会传播给HttpClient的用户。Htt…

再读《精通css》02:选择器

2019独角兽企业重金招聘Python工程师标准>>> 1.2 为样式找到目标1、类型选择器用来选择特定类型的原素。比如p&#xff0c;a&#xff0c;h1等等。也叫元素选择器或简单选择器。2、后代选择器用来寻找特定元素或元素组的后代。后代选择器由两个选择器之间的空格表示。…

余弦欧式距离matlab,余弦相似度和欧几里得距离

1.余弦相似度同过两个向量的夹角的余弦值来判断两个向量的相似度。余弦值取值[-1,1],越接近1&#xff0c;两向量夹角越小&#xff0c;越相似。图片.png二维公式&#xff1a;图片.pngn维公式&#xff1a;图片.png存在的问题[1]&#xff1a;余弦相似度更多的是从方向上区分差异&a…

App Store 排名获取。

为什么80%的码农都做不了架构师&#xff1f;>>> https://affiliate.itunes.apple.com/resources/documentation/genre-mapping/ app榜示例 &#xff0c; 取中国免费榜前10条&#xff1a; 首先访问 https://itunes.apple.com/WebObjects/MZStoreServices.woa…

使用 Playwright 对 ASP.NET Core 应用执行功能测试

前言在前面的文章中&#xff0c;我们已经介绍过 Playwright for .NET&#xff0c;它常用于自动化测试已经部署好的 Web 应用。其实&#xff0c;开发人员也可以使用它在 ASP.NET Core 应用程序中进行功能测试。功能测试功能测试是从用户角度编写&#xff0c;用于基于其要求验证系…

PHP自动查找指定文件夹下所有文件BOM和删除所有文件

2019独角兽企业重金招聘Python工程师标准>>> <?php if (isset($_GET[dir])){ //设置文件目录 $basedir$_GET[dir]; }else{ $basedir .; } $auto 1; checkdir($basedir); function checkdir($basedir){ if ($dh opendir(…

php支持cs吗,关于composer、phpmd和phpcs于windows中的安装与使用方法

Composer项目地址 https://getcomposer.org中文 http://docs.phpcomposer.com/Composer是 PHP 的一个依赖管理工具。它允许你申明项目所依赖的代码库&#xff0c;它会在你的项目中为你安装他们。一、安装Composer官网有详细介绍安装方法&#xff0c;包括windows和linux系统。以…

基于ASP.NET Core api 的服务器事件发送

现如今程序员对Web API的调用已经是轻车熟路。但是传统的api调用都是拉模式&#xff0c;也就是主动发起请求去调用一个api.但是程序员往往对另一种很有用的模式很陌生&#xff0c;即推模式。拉模式 - 主动调用并获取结果的模式。推模式 - 订阅并接受数据推送的模式。今天要介绍…

Android之解决java.lang.NoSuchMethodError:android.os.powerManager.isInteractive问题

1、问题 再三星平板(Android 4.2.2系统)我们代码powerManager调用了函数isInteractive方法,出现下面错误 java.lang.NoSuchMethodError:android.os.powerManager.isInteractive 2、解决办法 1、一开始想用try catch来解决,肯定不行,功能没实现,而且进程还是会挂 2…

DDD为何叫好不叫座?兼论DCI与业务分析的方法论

今天&#xff0c;仔细阅读了园子里面的一个朋友写的《一缕阳光&#xff1a;DDD&#xff08;领域驱动设计&#xff09;应对具体业务场景&#xff0c;如何聚焦 Domain Model&#xff08;领域模型&#xff09;&#xff1f;》(http://www.cnblogs.com/xishuai/p/3800656.html)这篇博…

php 实现的字典序排列算法,字典序的一个生成算法

字典序的一个生成算法。最近在LeetCode刷题&#xff0c;刷到一个题&#xff0c;链接&#xff1a;https://leetcode-cn.com/problems/permutation-sequence/这个题要求得长度为n的字典序列的第k个排列。我们知道&#xff0c;字典序列是一个长度为n(n>1)&#xff0c;元素为1~n…