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时则不会有问题.

利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

6.scrollLeft    :

对象的最左边到对象在当前窗口显示的范围内的左边的距离.

即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.

即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

setOff与scrollTop区别的更多相关文章

  1. offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

    这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...

  2. offsetheight 和clientheight、scrollheight、scrollTop区别

    clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高 ...

  3. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  4. vue中检测敏感词,锚点

    当发布文章的时候,标题有敏感词 则检测有敏感词的接口成功的时候,写锚点 eg: _this .$alert("检测到标题有敏感词,请修改后再发布", "提示", ...

  5. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

  6. scrollTop和offsetTop的区别,scrollTopLeft和offsetLeft的区别

    scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不 ...

  7. javascript中scrollTop和offsetTop的区别

    scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop   : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设 ...

  8. offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

    一.写在前面 在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offset ...

  9. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

随机推荐

  1. Hadoop2.7.7 centos7 完全分布式 配置与问题随记

    Hadoop2.7.7 centos7 完全分布式 配置与问题随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭 ...

  2. 状压DP之学校食堂

    题目 传送们 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负 ...

  3. Codeforces 1292C Xenon's Attack on the Gangs 题解

    题目 On another floor of the A.R.C. Markland-N, the young man Simon "Xenon" Jackson, takes a ...

  4. Python语法的使用和简介

    前言 Python的语法和其它编程语言的语法有所不同,编写Paython程序之前需要对语法有所了解,才能编写规范的Python程序. 输入输出 print() # 打印显示input() # 输入内容 ...

  5. docker安装,卸载和入门

    Docker 简介 背景 开发和运维之间因为环境不同而导致的矛盾 集群环境下每台机器部署相同的应用 DevOps(Development and Operations) 简介 Docker是一个开源的 ...

  6. day71 django收尾

    目录 一.Auth模块 1 简介 2 方法总结 3 如何扩展auth_user表 二.bbs表介绍 1 项目开发流程 2 bbs七张表关系 一.Auth模块 1 简介 在我们创建好一个django项目 ...

  7. day48 navicat使用及pymysql的使用

    目录 一.navicat介绍 1 基本使用 2 练习题 2.1 查询所有的课程的名称以及对应的任课老师姓名 2.2 查询平均成绩大于八十分的同学的姓名和平均成绩 2.3 查询没有报李平老师课的学生姓名 ...

  8. SpringCloud组件的停更和替换说明

    SpringCloud的Hoxton版本,和之前的版本相比,用新的组件替换掉了原来大部分的组件,老的组件现在处于 停更不停用 的状况. 详情见下图(× 的表示之前的组件,现在停更了的:√ 的表示新的替 ...

  9. Charles抓包工具操作指南

    一.Charles说明 Charles是HTTP代理/ HTTP监视器/反向代理,使开发人员或测试人员可以查看其计算机与Internet之间的所有HTTP和SSL/ HTTPS通信. 这包括请求,响应 ...

  10. cnn卷积理解

    首先输入图像是28*28处理好的图. 第一层卷积:用5*5的卷积核进行卷积,输入为1通道,输出为32通道.即第一层的输入为:28*28图,第一层有32个不同的滤波器,对同一张图进行卷积,然后输出为32 ...