offset 概述

offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 注意:返回的数值都不带单位

offset 系列常用属性

offset  和  style 的区别

offset 

  • offset可以得到任意样式表中的样式值

  • offset 系列获得的数值是没有单位的

  • offsetWidth包含padding+ border+width
  • offsetWidth等属性是只读属性,只能获取不能赋值
  • 所以,我们想要获取元素大小位置,用offset更合适

style

  • style只能得到行内样式表中的样式值

  • style.width获得的是带有单位的字符串

  • style.width获得不包含padding和border的值

  • style.width是可读写属性,可以获取也可以赋值

  • 所以,我们想要给元素更改值,则需要用style改变

 

元素偏移量 offset 系列的更多相关文章

  1. jq获取元素偏移量offset()

    解释: 1 获取匹配元素在当前视口的相对偏移. 2 返回的对象包含两个整型属性:top 和 left demo1: 获取top与left var aaa = $(".aaa "); ...

  2. jacascript 偏移量offset、客户区client

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 偏移量 偏移量(offset dimension)是 javascript 中的一个重要的概念.涉及到偏移 ...

  3. offset系列,client系列,scroll系列回顾

    一 scroll系列属性      ——滚动

  4. offset系列、scroll系列与client系列

    offset系列: offsetLeft:获取元素距离最左边的距离,自身的margin包括在内,不包括自身的border offsetTop:获取元素距离最上边的距离,自身的margin包括在内,不包 ...

  5. client系列、offset系列、scroll系列

    一.client系列 clientWidth/clientHeight    是我们设置的宽和高加上内边距(没有边框) clientLeft/clientTop 就是我们设置的边框值 二.offset ...

  6. 009 轮播图,offset系列

    关于使用JS做轮播图,使用一个章节进行笔迹. 一:简单轮播图 1.程序 <!DOCTYPE html> <html lang="en"> <head& ...

  7. offset系列属性

    offset系列:获取元素的相关的样式属性的值 offsetwidth:获取元素的宽 offsetheight:获取元素的高 offsetleft:获取元素距离左边位置的值 offsettop;获取元 ...

  8. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  9. div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

    先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...

随机推荐

  1. 4月10日 python学习总结 模块和面向对象

    1.hashlib  1.什么叫hash:hash是一种算法,该算法接受传入的内容,经过运算得到一串hash值 2.hash值的特点是:2.1 只要传入的内容一样,得到的hash值必然一样=====& ...

  2. vue学习过程总结(02)- 网上开源项目vue-element-admin的启动

    1.功能丰富的项目:https://github.com/PanJiaChen/vue-element-admin.git 因为我配置的时候,遇到许多的问题,用了一天半才启动的,所以安着他文档一步一步 ...

  3. 学习SpringMVC必知必会(3)~springmvc的请求和响应

    一.处理器方法响应处理 ▷ Controller方法该怎么返回.Controller数据该怎么进行共享 返回void/ModelAndView/String 1.Controller方法返回void ...

  4. 三极管与MOS管主要参数差别及驱动电路基极(栅极)串联电阻选取原则

    三极管与MOS管都常在电路中被当做开关使用,比较起来: 1. 三极管集电极电流IC (一般为mA级别),远小于MOS管ID(一般为A级别),因此MOS管多用在大电流电路中,如电机驱动 2. 三极管耗散 ...

  5. 羽夏看Win系统内核——调试篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  6. 简单面试前算法一览java

    1.排序 冒泡,快速排序 2.查找 二分查找 3.链表 翻转链表 合并链表 是否有环 b. 快慢指针 public class QuickSort {   public static void qui ...

  7. Postman请求报错:Error:getaddrinfo ENOENT 50.88.88.88

    一.问题来源 今天发布一个新开发的项目到通州现场,内容是开放几个接口给第三方调用,需要现场部署的同事使用postman调用测试一下,现场同事使用postman调用后反馈有如下错误: 二.解决方法 发现 ...

  8. pg数据库org.postgresql.util.PSQLException: ERROR: "xxx" is not a sequence

    问题场景 对pg数据表执行插入语句的时候,报错如下: { "timestamp": 1587012576734, "status": 500, "er ...

  9. JPA、JTA、XA相关索引

    JPA和分布式事务简介:https://www.cnblogs.com/onlywujun/p/4784233.html JPA.JTA与JMS区别:https://www.cnblogs.com/y ...

  10. 学习MFS(二)

    MooseFS,是一个具备冗余容错功能的分布式网络文件系统,它将数据分别存放在多个物理server或单独disk或partition上,确保一份数据有多个备份副本,对于访问MFS的client或use ...