窗口尺寸，文档高，元素宽高的获取方式

一.元素宽高：

window.onload = function() {
   var oDiv = document.getElementById('div1');
   /*
       width height
       style.width : 样式宽
       clientWidth : 可视区宽
       offsetWidth   : 占位宽
   */
   alert( oDiv.style.width );   //100
   alert( oDiv.clientWidth );   //样式宽 + padding   120
   alert( oDiv.offsetWidth );   //样式宽 + padding + border 可视区宽 + 边框   122
}

二.窗口尺寸

1.可视区尺寸
alert( document.documentElement.clientHeight );

2.滚动距离
      document.documentElement.scrollTop;     // firefox,IE下的，此方式在chrome下始终为0
      document.body.scrollTop ;                         // chorme下的
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   //使用时做兼容性处理
      alert(scrollTop)

3.offsetLeft[Top]

　　元素.offsetLeft[Top] : 只读属性当前元素到定位父级的距离（偏移值）
到当前元素的offsetParent的距离

如果没有定位父级
               offsetParent -> body
               offsetLeft -> html

           如果有定位父级
               ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离
                       如果自己有定位，那么就是到定位父级的距离
               其他：到定位父级的距离

4.scrollHeight

　　　 scrollHeight : 内容实际宽高

　　　alert(oDiv.scrollHeight);

三.文档高

　　offsetHeight
　alert( document.body.offsetHeight );

　ie : 如果内容没有可视区高，那么文档高就是可视区
　alert( document.documentElement.offsetHeight );

四.clientX[Y]

　　clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离

　　function fn1(ev) {
　　 var ev = ev || event;
　　alert(ev.clientX);
　　}
　　document.onclick = fn1;

　　分享技术，分享快乐！

转载于:https://www.cnblogs.com/babywin/p/6246547.html

窗口尺寸，文档高，元素宽高的获取方式相关推荐

页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离
注:以下内容只适用于chrome 页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height( ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
jquery获取元素宽高
前言 jquery获取元素宽高 <!DOCTYPE html> <html lang="zh" > <head><meta charset ...
如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight 作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字. <s ...
CSS子元素居中(父元素宽高已知，子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
监听元素宽高变化resize
首先我们先了解js中resize功能只支持window对象正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的. 1.重构resize() 在已经引入jquery的情况下 js文件 ...
vue 获取元素宽高
vue 获取元素宽高 vue 中获取组件宽高分两种情况: 1.获取普通组件宽高,直接使用 $refs 即可 2.获取子组件宽高,需使用 $refs.$el 子组件 <template>&l ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...

窗口尺寸，文档高，元素宽高的获取方式

窗口尺寸，文档高，元素宽高的获取方式相关推荐

最新文章

热门文章