`
wyf
  • 浏览: 424814 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

元素的各种位置,偏移量,大小,滚动。

    博客分类:
  • JS
 
阅读更多

      要想知道某个元素在页面上的偏移量,将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加,如此循环直至根元素,就可以得到一个基本准确的值。以下两个函数就可以用于分别 取得元素的左和上偏移量。



 

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
} 

 

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
} 

 客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内。

要确定浏览器 视口大小,可以使用 document.documentElement 或 document.body(在 IE7 之前的版本中)的 clientWidth 和 clientHeight。

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
} 



 

 在确定文档的总高度时(包括基于视口的最小高度时),必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。下面就 是这样一个例子。

var docHeight = Math.max(document.documentElement.scrollHeight,
 document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
 document.documentElement.clientWidth); 

 下面这个函数会检测元素是否位 于顶部,如果不是就将其回滚到顶部。

function scrollToTop(element){
 if (element.scrollTop != 0){
 element.scrollTop = 0;
 }
} 

 

 

  • 大小: 20.5 KB
  • 大小: 27.9 KB
  • 大小: 23.2 KB
分享到:
评论

相关推荐

    javascript获取元素偏移量的方法有哪些

    通过四个属性可以获得元素的偏移量: 1、offsetHeight: 元素在垂直方向上占用的空间的大小,(像素)。包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度。 2、offsetWidth:元素在水平方向上占用...

    jquery.copycat:一个jQuery插件,可将元素的位置和大小复制到另一个元素

    可用options : scroll :滚动元素以侦听滚动事件(默认为window ) handleResize :true以处理调整大小,否则为false(默认为true ) subtractScroll :true减去滚动偏移量,否则返回false(默认为null表示自动) ...

    DOM2非标准但却支持很好的几个属性小结

    1、偏移量 offsetWidth:指元素在水平方向上占用的空间大小,包括边框及滚动条的宽度 offsetHeight:指元素在垂直方向上占用的空间大小,包括边框及滚动条的高度 offsetLeft:返回元素的左偏移量,即元素的左外边框...

    JS中各种尺寸的获取

    JS中各种尺寸的获取 页面上的尺寸获取 ...offsetTop/offsetLeft——当前元素的偏移量:当父级有定位,根据父级的偏移量,父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。 scrollWidth/s

    HTML元素拖拽功能实现的完整实例

     1.1 offset(偏移量) 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小四个属性 offsetHeight:元素正在垂直方向上占用的大小空间,单位为px...

    小程序click-scroll组件设计

    一. 背景 有些业务需求,要求前端展示的内容多时可以通过scroll的形式拖拉查看,但是太多的滚动条又...1.偏移量(offset dimension): 元素在屏幕上占用的可见的所有空间,元素的可见大小由其高度、宽度决定,包括所

    三剑客:offset、client和scroll还傻傻分不清?

    元素可见的大小由其高度、宽度决定,包括所有内边距,滚动条和边框大小四个属性 offset css的样式: <style> .son { width: 100px; height: 100px; padding: 10px; border: 10px solid #ccc; } ....

    unitu3d ngui实战教程

    3.5.6 制作按钮的偏移动画 3.5.7 制作按钮的旋转动画 3.5.8 添加按钮单击音效 3.5.9 任何事物都可以变成按钮,不仅仅是UI 3.6 制作进度条(UISlider) 3.6.1 怎样判断是否应当使用进度条 3.6.2 创建进度条 3.6.3 ...

    Unity 3D NGUI实战教程(80M完整版)

    3.5.6 制作按钮的偏移动画 3.5.7 制作按钮的旋转动画 3.5.8 添加按钮单击音效 3.5.9 任何事物都可以变成按钮,不仅仅是UI 3.6 制作进度条(UISlider) 3.6.1 怎样判断是否应当使用进度条 3.6.2 创建进度条 3.6.3 ...

    MAPGIS地质制图工具

    还可以随机按偏移量自动等分线。 图元筛选:根据参数或者属性筛选图元,还可选择相同的图元。 格式刷:把参数或者属性结构(属性值不会)赋值给选择的图元。 超级拷贝粘贴 注意问题: 1、本功能可以在不同工程之间、...

    文章管理系统

    5.修复后台服务器文件管理,文件总大小超过几G会出现页面程序错误BUG 6.完善后台JS复制事件 7.修复其他BUG (1~4更新点感谢白帽:seraph1984,通过乌云平台告知我们网钛。这些入侵漏洞只要有根据程序后台引导页提示...

    Windows 系统错误代码简单分析

     0998 对内存位置的无效访问。  0999 执行页内操作出错。  1001 递归太深;堆栈溢出。  1002 窗口无法用来发送消息。  1003 无法完成此项功能。  1004 标志无效。  1005 卷不包含已识别的文件...

Global site tag (gtag.js) - Google Analytics