zoukankan      html  css  js  c++  java
  • 关于js和jQuery定位的那些事总结

    在js中关于元素的:

      1、left属性规定元素的左边缘,该属性定义了定位元素左边边界与其包含块左边界之间的便宜。(如果position属性的值为“static”,那设置“left”不会有效果。类型为string,可读可写)。

      2、offsetLeft返回当前元素的左边界到他包含元素的左边界的偏移量(类型:int 只读)。

      3、width规定元素的宽度(类型:string 可读可写)。

      4、offsetWidth返回元素的宽度,包括padding和border。

      5、scrollWidth返回元素的完整宽度,包括padding、border、滚动条。

      6、scrollLeft滚动条的拖动距离(使用ScrollLeft的必要条件是:a<次标签的内容宽度超过了标签本身的宽度>b<scrollLeft的值是在一定的范围内,不能无限增大>c<scrollLeft常与定时器一起使用,实现位置移动效果,如滚动>)。

    在js中关于e的:

      1、pageX:鼠标在页面中的位置,从页面左上角开始,以页面为参考点,不随滚动条的移动而变化(只有FF持有,IE没有)。

      2、clientX:鼠标在页面的可视区域,随滚动条变化而变化(IE有)。

         pageX = clientX + scrollLeft -clientLeft(兼容IE)。

    IE6+ FF1.06+:

      clientWidth = width + padding

      clientHeight = height + padding

      offsetWidth = width + padding + border

      offsetHeight = height + padding + border

    在jQuery中偏移的:

      $.offset({left: ,top: })//返回相当于文档的位置(当前视口)

      $.offsetParent()//返回最近的祖先定位元素

      $.position()//返回匹配相对于父元素的位置

      $.scrollLeft()//返回或设置匹配元素的滚动条水平位置

      使用position()方法时,事实上是把该元素当作绝对定位来处理,获取的是钙元素相对于最近的一个拥有相对定位的父元素的偏移位置,如果父元素为默认定位(static),则处理方式和offset()一样,是相对于当前窗口的偏移位置。(string)

      使用offset()方法时,不光钙元素如何定位,也不管其父元素如何定位,都是获取该元素相对于当前视口的偏移。(number)

  • 相关阅读:
    vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片
    Dart和JavaScript对比小结
    webgl学习,知识储备
    nightwatch+selenium做e2e自动化测试采坑小计
    linux centos7 环境变量设置
    ES6学习笔记
    SQLserver数据库还原语句
    AngularJs的那些坑(持续更新...)
    Hosting socket.io WebSocket apps in IIS using iisnode
    mongodb 数据库操作--备份 还原 导出 导入
  • 原文地址:https://www.cnblogs.com/liuxinjin/p/3664004.html
Copyright © 2011-2022 走看看