dom相关_html-js-css

概述确定滚动距离查看视口的尺寸标准模式or怪异模式查看元素的几何尺寸查看元素的尺寸查看元素的位置让滚动条滚动确定滚动距离 function getScrollOffset() { if(window.pageXOffset) { return { x : window.pageXOffset, y : w

确定滚动距离
查看视口的尺寸
标准模式or怪异模式
查看元素的几何尺寸
查看元素的尺寸
查看元素的位置
让滚动条滚动
确定滚动距离

function getScrollOffset() {    if(window.pageXOffset) {        return {            x : window.pageXOffset,y : window.pageYOffset        }    }else{        return {            x : document.body.scrollleft + document.documentElement.scrollleft,y : document.body.scrolltop + document.documentElement.scrolltop        }    }}

查看视口的尺寸

window.innerWIDth/innerHeight (ie8及ie8以下不兼容)
document.documentElement.clIEntWIDth/clIEntHeight 标准模式下，任意浏览器都兼容
document.body.clIEntWIDth/clIEntHeight 适用于==怪异模式==下的浏览器
封装兼容性方法，返回浏览器视口尺寸getVIEwportOffset()

  function getVIEwportOffset() {    if(window.innerWIDth) {      return {        w : window.innerWIDth,h : window.innerHeight      }    }else{      if(document.compatMode === "BackCompat") {        //怪异模式，混杂模式        return {          w : document.body.clIEntWIDth,h : document.body.clIEntHeight        }      }else{        //标准模式        return {          w : document.documentElement.clIEntWIDth,h : document.documentElement.clIEntHeight        }      }    }  }

标准模式or怪异模式<!DOCTYPE HTML> 这段代码的作用，进入标准模式（简单来说）怪异模式（浏览器的渲染模式不同）（也叫混杂模式）：试图兼容之前的语法（识别过时的语法）使用document.compatMode属性代表兼容性，这个属性可以判断是否时标准模式。查看元素的几何尺寸domEle.getBoundingClIEntRect(); （求出的是视觉上的尺寸）兼容性很好该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标height和wIDth属性，老版本IE未实现返回的结果不是“实时的”查看元素的尺寸dom.offsetWIDth （求出的是视觉上的尺寸）dom.offsetHeight查看元素的位置dom.offsetleft dom.offsettop对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。dom.offsetParset返回最近的有定位的父级，如无，则返回body,body.offsetParset返回null。让滚动条滚动window上有3个方法：scroll(),scrollTo(),| scrollBy();三个方法功能类似，用法都是将x,y坐标传入，即实现让滚动轮滚动到当前位置。区别：scrollBy()会在之前的数据基础上做累加。eg.利用scrollBy()快速阅读的功能

总结

以上是内存溢出为你收集整理的dom相关全部内容，希望文章能够帮你解决dom相关所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1082833.html