offset

    offset翻译就是偏移量,可以使用他相关的属性可以动态的得到该元素的位置、大小等等
    获得元素距离带有定位父元素的位置
    获得元素自己的大小(宽度高度)
    注意 返回的数值不带单位
 
 

offset常用的属性

  1. element.offsetTop() 返回元素上方到带有定位的父元素距离
  2. element.offsetLeft() 返回元素左边到带有定位的父元素距离
  3. element.offsetWidth() 返回元素的宽度
  4. element.offsetHeight() 返回元素的高度
  5. element.offsetParent() 返回该元素带有定位的父元素 如果父元素都没有定位就返回body
     <div class="box1"></div>
<script>
var box = document.querySelector('.box1')
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
console.log(box.offsetParent);
</script>

offset与style区别

    offset可以得到任意样式中的元素值,style只能得到行内样式中的样式值
    offset获取的数值不带单位,style获取的数值是带单位的
    offsetWidth 包含padding,border,width ,style.width 不包含padding和border的值
    offsetwidth 属性是只读属性,只能获取不能赋值,style.width是可以修改属性的值的
     <script>
var box = document.querySelector('.box1')
console.log(box.offsetWidth);
console.log(box.style.width);
</script>

案例

获取鼠标在盒子里面的坐标

css代码

 .box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 100px;
top: 100px;
}
     <div class="box"></div>
<script>
var box = document.querySelector('.box')
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
})
</script>

效果图

JS pc端网页特效的更多相关文章

  1. PC端网页特效

    元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) ...

  2. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

  3. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  4. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

  5. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  6. Java SpringMVC实现PC端网页微信扫码支付完整版

    一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...

  7. 自适应PC端网页制作使用REM

    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...

  8. PC端网页的基本构成

    首先,一个前端最基本的就是排网页,有人会看不起拍页面,认为不就是排一个页面嘛,有啥的,分分钟的事,可是他不知道的是,一个网页中也包含了很多内容,像我们如果不理解margin,padding,会经常对我 ...

  9. pc端网页,移动端网页(andorid、ios)离开页面做一个时间存储

    如图所示:在一个页面中做了一个倒计时,然后用户想离开页面做其他事情,需求是离开页面之后把时间保存,下一次进来继续的时候时间还是上次离开的时间 第一次我用的事件是:  // window.onbefor ...

随机推荐

  1. Configurate vim tool

    vim tool is a commom editor, for the sake of improving effeicient, it is necessary to configurate vi ...

  2. spring security简单登录的认证

    一.思路 1.先导入相关配置(使用spring security校验之后,登录拦截的配置) 2.创建一个 WebSecurityConfig 继承 WebSecurityConfigurerAdapt ...

  3. toad for oracle 小技巧

    在SQL*LOADER 工具上(或者称为SQLLDR,读为:“sequel loader”),因为它仍然是装载数据的主要方法,SQLLDR 能够在极短的时间内装 载庞大数量的数据. 我也是初使用,理解 ...

  4. Ethical Hacking - GAINING ACCESS(10)

    CLIENT SIDE ATTACKS Use if server-side attacks fail. If IP is probably useless. Require user interac ...

  5. Python Ethical Hacking - KEYLOGGER(1)

    A program that records keys pressed on the keyboard. Common features: Store logs locally(local keylo ...

  6. 技术干货:Ceph搭建硬件建议详解

    Ceph是专为在商品硬件上运行而设计的,这使得构建和维护超大规模的数据集群在经济上是可行的.当规划出你的集群硬件时,你需要平衡一些考虑因素,包括故障域和潜在的性能问题.硬件规划应该包括将Ceph守护进 ...

  7. C++语法小记---类型检测

    类型检测 C++使用typeid关键字进行类型检查 不同的编译器使用typeid返回的类型名称不严格一致,需要特别注意 也可以使用虚函数,返回各自的类型名 如果typeid的操作数不是类类型(类指针也 ...

  8. linux日志朔源分析记录

    lastlog 记录用户最后一次登录情况 只有root最近登录过 lastlog -u 用户名或者uid uid 直接在passwd文件中的低三位可以看到 lastb 记录用户用户登录失败的用户记录, ...

  9. 面试题六十:n个骰子的点数

    把n个骰子扔在地上,求出现和为s的概率 可得n<=s<=6n 方法:定义6n-n+1长度的数组,然后对所有可能出现的组合进行计算,把结果进行计数存进数组:递归 方法二:动态规划,大问题小化 ...

  10. 一分钟速学 | NMS, IOU 与 SoftMax

    非极大抑制 NMS的英文是Non-maximum suppression的缩写. 简单的说,就是模型给出了多个重叠在一起的候选框,我们只需要保留一个就可以了.其他的重叠的候选框就删掉了,效果可见下图: ...