企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
> 持续更新... ## DOM对象 ###只读属性 clientWidth和clientHeight ~~~ 该属性指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //width var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //height ~~~ offsetWidth和offsetHeight ~~~ 这一对属性指的是元素的border+padding+content的宽度和高度,该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关 ~~~ clientTop和clientLeft ~~~ 这一对属性是用来读取元素的border的宽度和高度的。 ~~~ offsetLeft和offsetTop ~~~ 说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的(position:absolute或者position:relative)父级元素(不仅仅指的是直接父级元素,只要是它的父元素都可以),该父级元素就是当前元素的offsetParent,如果从该元素向上寻找,找不到这样一个父级元素,那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素,相对于其offsetParent左边距离和上边距离,即当前元素的border到包含它的offsetParent的border的距离 ~~~ scrollHeight和scrollWidth ~~~ 顾名思义,这两个属性指的是当元素内部的内容超出其宽度和高度的时候,元素内部内容的实际宽度和高度,需要注意的是,当元素其中内容没有超过其高度或者宽度的时候,该属性是取不到的。 ~~~ ### 可读可写属性 scrollTop和scrollLeft ~~~ 这对属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度。 function scroll() { if (window.pageYOffset != null) // ie9+ 和其他浏览器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if (document.compatMode == "CSS1Compat") // 声明的了 DTD // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的 left: document.body.scrollLeft, top: document.body.scrollTop } } ~~~ obj.style.*属性 ~~~ 对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等,在读的时候,他们返回的值常常是带有单位的(如px),同时,对于这种方式, 它只能够获取到该元素的行内样式,而并不能获取到该元素最终计算好的样式,这就是在读取属性值得时候和以上只读属性的区别,要获取计算好的样式,请使用obj.currentstyle(IE)和getComputedStyle(IE之外的浏览器)。另一方面,这些属性能够被赋值,js运动的原理就是通过不断修改这些属性的值而达到其位置改变的,需要注意的是,给这些属性赋值的时候需要带单位的要带上单位,否则不生效。 ~~~ ## Event对象 clientX和clientY ~~~ 这对属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,不管浏览器窗口大小如何变化,都不会影响点击位置的坐标 ~~~ screenX和screenY ~~~ 事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的screenX和screenY值 ~~~ offsetX和offsetY ~~~ 这一对属性是指当事件发生时,鼠标点击位置相对于该事件源的位置 ~~~ pageX和pageY ~~~ 顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度 ~~~