offsetHeight:内容高度+padding高度+边框宽度 ,jQuery中的outerHeight()方法返回的就是这个高度 注意:用document.getElementById('bottom...DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的click事件处理程序传入的参数就是这个event对象。...访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在。 ...event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件的原始元素,思路二就是要利用这个属性。...可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素,如果是则方法return不做操作,如果不是则隐藏该div。
' | 'auto' // 平滑滚动还是默认直接滚动 } 复制代码 Element.scrollHeight/scrollWidth Element.scrollHeight 这个只读属性是一个元素内容高度的度量...在实际工作中如果对于滚动操作有很频繁的需求,个人建议去使用better-scroll,它是一个移动/web端的通用js滚动库,内部是基于元素transform去操作的滚动并不会触发相关重塑/回流。...例如,不论页面是否有垂直/水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX/Y 值都将为 0 。...注意是触发元素也就是 e.target,额外小心如果事件对象中存在从一个子元素当移动到子元素内部时,e.offsetX/Y 此时相对于子元素的左上角偏移量。...返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。
('click',doSomething,false); 第一个元素是我们要监听的事件,第二个元素是事件触发时的回调函数,第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...(最好是一个大数),并且更改 options 选项框里的值 smooth 或 auto (这也是 behaviro 属性的唯一两个选项)。...如前所述,也可以通过复选框组来完成,尝试更改HTML中的默认选中选项,然后重试按钮。...我将 blur 和 focus 包括在内,以证明这些不符合条件,并且始终返回0(即不单击) 像IE11这样的老浏览器有非常不一致的行为 请注意,该演示包含了一个很好的用例,用于演示-模拟三次单击事件的能力...ScrollHeight 和 ScrollWidth 属性 ScrollHeight 和 ScrollWidth 属性听起来可能很熟悉,因为您可能会将它们与宽度和高度相关的 DOM 特性混淆。
; 滚动条中内容的高度:boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft...在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素,计算鼠标与其的偏移值, 以找到元素的border的左上角的外交点作为相对点。...另外offsetY并不在乎触发事件的元素是否有定位属性,它总是相对于触发事件的元素来计算偏移值。...鉴于layerY和offsetY的不同,要兼容的使用二者要注意 1.触发事件的元素一定要设置定位属性。 ...2.在元素具有上边框border-top的情况下, layerY比offsetY的值多一个border-top的宽度值。
其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度...简单的来说:在网页的盒子模型中,一个元素由内到外分别由 height + padding + border + margin组成,而clientHeight只取前面的height和padding。...什么意思呢,让我们来看一个例子: 可以看到,在用scrollHeight获取可滚动内容的高度时有这么一个坑,那就是当你不希望定位的后代元素被计算入滚动总高度的时候,使用scrollHeight...本来想着用盒子的scrollHeight去获取内容的高度,但是却导致了滚动条的抖动问题,原因是我让定位的后代元素随着滚动高度而改变位置和高度,导致scrollHeight获取到值发生改变,频繁地触发滚动条的刷新...有兴趣的小伙伴可以自己去试一下。
第三个参数是一个名为 useCapture 的布尔值,用于指示是否要使用事件冒泡或捕获【https://www.sitepoint.com/event-bubbling-javascript/】。...这肯定会在很多情况下派上用场,并且无需用 removeEventListener() 或使用其他一些复杂的技术来强制单个事件触发器。...如果你用过 jQuery,可能熟悉该库中的类似功能:.one() 方法。...可以通过修改代码中的数字更改值。 至于浏览器支持,似乎在兼容性上有些小问题,不过看上去现在几乎所有还在使用中的浏览器都支持可选参数功能,包括 IE10。...scrollHeight 和 scrollWidth 属性 scrollHeight 和 scrollWidth 属性可能听起来很熟悉,因为你可能会将它们与其他与宽度和高度相关的 DOM 功能混淆。
InitializeComponent(); //先定义控件的DocumentCompleted事件,网页加载完毕 //System.Windows.Forms.WebBrowser...,网页加载完就触发 /// /// /// 的宽度 int scrollWidth = webBrowser1.Document.Body.ScrollRectangle.Width;...//重新设置控件的大小 webBrowser1.Size = new Size(scrollWidth, scrollHeight); /.../创造一个空图片 Bitmap bm = new Bitmap(scrollWidth, scrollHeight); //把控件画到这个图片中去
document.body.offsetHeight // 网页可见区域(body)的高度,包括border,margin document.body.scrollWidth...// 网页正文的宽度,包括有滚动条溢出的宽度 document.body.scrollHeigh // 网页正文的高度,包括有滚动条溢出的高度 滚动条的滚动区域...高度的时候,开始下一次的数据加载 当数据加载的时候,停止滚动条监听,滚动条的触发需要限制,比如触发后2s时间内不再触发。...反复如此,当数据加载完毕的时候,比对现有数据条数,与服务端返回的数据总数,如果相等,则加载完毕,那么清除 滚动条监听 那么一个简单的上拉加载数据页面就OK了~ jquery/2.0.0/jquery.min.js"> //
昨天给我提了一个需求,将大屏界面嵌到目前的系统里,加一个全屏的功能。...因为大屏界面是使用决策报表制作的,所以我本来打算从报表本身入手,添加一个按钮可以全屏与退出全屏,可是这多出来的一个按钮在报表界面中实在太过突兀,没办法只好考虑其他方式。...在搜索文档的过程中,有一种解决方案是通过鼠标单击报表界面实现全屏与退出全屏,高度符合我的需求,于是乎就使用这样的方法了。...在设计器中打开决策报表,右边的组件设置中选择‘body’,然后选“事件-添加事件-点击”,如下图所示: [添加事件] 随后点击铅笔的图标,将以下代码复制进去: var docElm = document.documentElement...: [最终效果] 后来完成后又说只需要单击全屏,不能单击退出全屏以防误触,经过对代码的观察,我更改了if (document.body.scrollHeight === window.screen.height
设置给任何层添加事件触发调用对象层的内容 function showid(idname){ var newBox=document.getElementById(idname); console.log...) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight...屏幕可用工作区宽度:window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...console.log(Request("a")); console.log(Request("b")); console.log(Request("c")); 6. div已经有一个
二、scroll家族 1、scroll家族主要包括scrollWidth、scrollHeight、scrollLeft、 scrollTop、 onscroll事件 scrollWidth/scrollHeight...= func) 屏幕每滚动一次,哪怕只有一个像素也会触发这个事件。...(盒子为主) 作用:距离父系盒子中带有定位的距离。...在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。...比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date) 普通浏览器支持 event(传参) ie 678 支持 window.event(无参) ?
由于 mouseenter 不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其 mouseover 和 mouseout 事件,但是却不会触发 mouseenter 和 mouseleave...5. offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别?...scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸。 scrollTop 属性返回的是一个元素的内容垂直滚动的像素数。...setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。...一个事件触发后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。
先区分一下 window 对象和 document 对象: window 对象表示浏览器中打开的窗口,而 document 对象表示整个 html 文档,它是 window 对象的一部分。.../scrollHeight: 对于 body 元素,在没有滚动条的情况下: body.scrollWidth = window.innerWidth - scrollBar body.scrollHeight...= window.innerHeight - scrollBar 在有滚动条的情况下: body.scrollWidth = width + padding + border + margin body.scrollHeight...= height + padding + border + margin 对于其他元素,在没有滚动条的情况下: element.scrollWidth = element.clientWidth element.scrollHeight...element.style.property/element.getBoundingClientRect().property;: 对于一个 dom 元素,它的 style 属性返回的是一个属性可读写的对象
offsetTop、offsetLeft、 offsetWidth、offsetHeight、 scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop...事件节流(throttle)和防抖(debounce) 比如窗口的scroll和resize事件,一旦激活,会频繁触发相应的事件函数。频繁触发回掉函数导致的大量计算有可能引发页面抖动甚至卡顿。...为了规避这些风险,我们会采用事件节流或者防抖,来降低函数的触发频率。 节流:当事件第一次被触发时,在指定时间内,无论再次触发多少次,都会被忽略。也就是说,以第一次事件为准。...防抖:事件触发后,会延迟执行,在延迟时间内,如果事件再次被触发,上一次的事件被取消,以当次为准,重新延迟执行。也就是说,以最后一次事件为准。....} // 不推荐 // 浏览器会先查找所有的a标签,然后再找这些a标签中哪些有span父标签... div span a {...}
应该是前天晚上到凌晨,总算搞定了一个小小功能。...著名的ztree树状菜单拥有a href=***,target=“iframename”,就是这个ztree作为树状侧栏放在左侧,在它上面点击一个链接,就可以 在右侧的iframe里打开一个页面。...:用事件event功能,当点击一个nodes,触发这个event,然后这里面就可以写逻辑代码,比如,指定在iframe里打开指定的页面。...那剩下的就提取这个data里的部门id或者人员id就可以打开部门或人员的业绩情况了。 另外一个就是jquery如何开某个网页显示在iframe里。就是这句就行了。...= null) { ifm.height = subWeb.body.scrollHeight; ifm.width = subWeb.body.scrollWidth; } } 点击部门的右侧
2、方法二 元素.width(属性值或者数字); 元素.height(属性值或者数字); 1、jQuery中用以上方式可以获取和设置元素的宽高。 2、当没有参数的时候是获取元素的宽高属性。...({"left":值, "top",值}; 1、元素.offset(); 返回值是一个对象。...语法: // 获取元素向左卷曲出去的距离 元素.scrollLeft(); // 获取元素向上卷曲出去的距离 元素.scrollTop(); PS:没有 scrollWidth() 和 scrollHeight...() 元素.scroll(function() {}); // 元素卷曲事件,元素在向上或向左卷曲的时候触发的事件。...,只需要一个bind,可以绑定多个事件。
前言 最近在做项目的时候自己写了一些JavaScipt代码,于是自己又进行简单的查阅资料整理了一下,发现了如下几个比较有用的知识点: 1、三种声明函数的方式 2、jQuery $(document...).ready() 与window.onload的区别 3、location.href 4、获取url中的参数 5、判断是否存在函数的方法 6、设置Iframe高度 7、解决文本框设置只读后按退键后退页面...在HTML的Iframe标签中加入一个onload事件,就是在Iframe页面加载完毕时进行计算设置高度。...7、解决文本框设置只读后按退键后退页面 解决方法就是定义一个全局的document.documentElement.onkeydown事件,来检测页面每次按键按下时的操作 document.documentElement.onkeydown...,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。...clientHeight 大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域...说明 以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度...上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。 scrollWidth 也是类似道理。
element.dir 设置或返回元素的内容是否可编辑。 element.firstChild 返回元素的首个子。 element.getAttribute() 返回元素节点的指定属性值。...element.replaceChild() 替换元素中的子节点。 element.scrollHeight 返回元素的整体高度。...element.scrollWidth 返回元素的整体宽度。 element.setAttribute() 把指定属性设置或更改为指定值。...element.setAttributeNode() 设置或更改指定属性节点。...element.scrollHeight - 可以获取元素整个滚动区域的宽度和高度 */ console.log("wrap.scrollWidth="+wrap.scrollWidth
本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分 scrollWidth...:' + test.scrollHeight } 与scrollHeight和scrollWidth属性不同的是,scrollLeft和scrollTop是可写的 [注意]为... 该方法可以接受一个布尔值作为参数。...,才滚动浏览器窗口或容器元素,最终让它可见。... scroll事件是在window对象上发生的,它表示的是页面中相应元素的变化。