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. Presidential-01

    环境搭建 官网地址:https://www.vulnhub.com/entry/presidential-1,500/ 靶机下载地址: https://download.vulnhub.com/pre ...

  2. .Net core Api后台获取数据，异步方法中，数据需采用Linq分页

    .net core api using System.Collections.Generic; using System.Linq; using System.Text.RegularExpressi ...

  3. MyBatis 与 Hibernate 有哪些不同？

    1.Mybatis 和 hibernate 不同,它不完全是一个 ORM 框架,因为 MyBatis 需要 程序员自己编写 Sql 语句. 2.Mybatis 直接编写原生态 sql,可以严格控制 s ...

  4. docker打包镜像，测试部署

    docker基本入门以后,(docker基本入门https://www.cnblogs.com/yangyangming/p/11470926.html)可以试试打包docker镜像与dockerfi ...

  5. 描述 Java 中的重载和重写？

    重载和重写都允许你用相同的名称来实现不同的功能,但是重载是编译时活动, 而重写是运行时活动.你可以在同一个类中重载方法,但是只能在子类中重写方 法.重写必须要有继承.

  6. php安装扩展的两种方法

    方法一:使用yum命令安装 1.yum install libevent-devel 2.pecl install channel://pecl.php.net/libevent-0.1.0 3.ec ...

  7. Netty学习摘记 —— 再谈引导

    本文参考 本篇文章是对<Netty In Action>一书第八章"引导"的学习摘记,主要内容为引导客户端和服务端.从channel内引导客户端.添加ChannelHa ...

  8. 数据结构：DHU顺序表ADT模板设计及简单应用：找匹配

    顺序表ADT模板设计及简单应用:找匹配 时间限制: 1S类别: DS:线性表->线性表应用 问题描述: 输入范例: 100000100000 99999 99998 99997 99996 99 ...

  9. ctfhub 过滤运算符 综合过滤练习 读取源代码 远程包含 eval执行 文件包含 php://input

    过滤运算符 过滤了\和&那么尝试; 成功那么将flag cat出来 127.0.0.1;cat flag_27249269530391.php 得到flag 综合过滤练习 这次过滤有点多过滤了 ...

  10. （stm32学习总结）—GPIO位带操作

    本章参考资料:<STM32F10X-中文参考手册>存储器和总线构架章节.GPIO 章节,<CM3 权威指南 CnR2>存储器系统章节. 位带简介 位操作就是可以单独的对一个比特 ...