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. [转载]nc命令详解

    最近在搞反向连接,试来试去发现最好的工具还是nc.正好趁这个机会把nc的用法总结一下: 1.端口扫描: nc -vv ip port 例:nc -vv 192.168.1.1 5000 扫描192.1 ...

  2. 计算机网络:套接字(Socket)| Python socket实现服务器端与客户端通信,使用TCP socket阿里云ECS服务器与本机通信

    所谓套接字(Socket),就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象.一个套接字就是网络上进程通信的一端,提供了应用层进程利用网络协议交换数据的机制.从所处的地位来讲,套接字上联应 ...

  3. Apache HBase MTTR 优化实践

    HBase介绍 HBase是Hadoop Database的简称,是建立在Hadoop文件系统之上的分布式面向列的数据库,它具有高可靠.高性能.面向列和可伸缩的特性,提供快速随机访问海量数据能力. H ...

  4. Spring Authorization Server 0.2.3发布,放出联合身份DEMO

    很快啊Spring Authorization Server又发新版本了,现在的版本是0.2.3.本次都有什么改动呢?我们来了解一下. 0.2.3版本特性 本次更新的新特性不少. 为公开客户端提供默认 ...

  5. request和response——请求响应对象

    请求对象--request 获取get请求的值 一次请求,返回一个响应. 地址栏:http://127.0.0.1:8000/day3/get_request?lan=python 问号:代表请求参数 ...

  6. 比Tensorflow还强?

    大家好,我是章北海 Python是机器学习和深度学习的首选编程语言,但绝不是唯一.训练机器学习/深度学习模型并部署对外提供服务(尤其是通过浏览器)JavaScript 是一个不错的选择,市面上也出现了 ...

  7. JavaScript对不同数据结构的常见循环

    var obj1 = { title : 'tom and jetty', author : 'pecool' } function Book(){} Book.prototype.price = 2 ...

  8. Java 中,Serializable 与 Externalizable 的区别?

    Serializable 接口是一个序列化 Java 类的接口,以便于它们可以在网络上传输 或者可以将它们的状态保存在磁盘上,是 JVM 内嵌的默认序列化方式,成本高. 脆弱而且不安全.Externa ...

  9. -> 在c语言中是什么意思?

    ->在C语言中称为间接引用运算符,是二目运算符,优先级同成员运算符".".用法:p->a,其中p是指向一个结构体的指针,a是这个结构体类型的一个成员.表达式p-> ...

  10. mian中的argv调用时为什么不是*argv

    c++main函数char * argv[]是个指针数组,元素是指针,为何argv[1]得到不是地址? 照我的理解char *argv[]保存的应该是一组指针,即地址,每个地址中保存的是char类型变 ...