首页
学习
活动
专区
圈层
工具
发布

JavaScript基础学习--零碎

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。

1.2K70

一文彻底搞懂js中的位置计算

' | 'auto' // 平滑滚动还是默认直接滚动 } 复制代码 Element.scrollHeight/scrollWidth Element.scrollHeight 这个只读属性是一个元素内容高度的度量...在实际工作中如果对于滚动操作有很频繁的需求,个人建议去使用better-scroll,它是一个移动/web端的通用js滚动库,内部是基于元素transform去操作的滚动并不会触发相关重塑/回流。...例如,不论页面是否有垂直/水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX/Y 值都将为 0 。...注意是触发元素也就是 e.target,额外小心如果事件对象中存在从一个子元素当移动到子元素内部时,e.offsetX/Y 此时相对于子元素的左上角偏移量。...返回的style是一个实时的 CSSStyleDeclaration 对象,当元素的样式更改时,它会自动更新本身。

4.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【JS】328- 8个你不知道的DOM功能

    ('click',doSomething,false); 第一个元素是我们要监听的事件,第二个元素是事件触发时的回调函数,第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...(最好是一个大数),并且更改 options 选项框里的值 smooth 或 auto (这也是 behaviro 属性的唯一两个选项)。...如前所述,也可以通过复选框组来完成,尝试更改HTML中的默认选中选项,然后重试按钮。...我将 blur 和 focus 包括在内,以证明这些不符合条件,并且始终返回0(即不单击) 像IE11这样的老浏览器有非常不一致的行为 请注意,该演示包含了一个很好的用例,用于演示-模拟三次单击事件的能力...ScrollHeight 和 ScrollWidth 属性 ScrollHeight 和 ScrollWidth 属性听起来可能很熟悉,因为您可能会将它们与宽度和高度相关的 DOM 特性混淆。

    1.9K10

    js、jQuery 获取文档、窗口、元素的各种值

    ; 滚动条中内容的高度:boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上: window.screenTop; 网页正文部分左: window.screenLeft...在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素,计算鼠标与其的偏移值, 以找到元素的border的左上角的外交点作为相对点。...另外offsetY并不在乎触发事件的元素是否有定位属性,它总是相对于触发事件的元素来计算偏移值。...鉴于layerY和offsetY的不同,要兼容的使用二者要注意   1.触发事件的元素一定要设置定位属性。   ...2.在元素具有上边框border-top的情况下, layerY比offsetY的值多一个border-top的宽度值。

    17.4K32

    JS中clientHeight、scrollHeight和offsetHeight的大坑,滚动条抖动问题解决

    其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度,而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度...简单的来说:在网页的盒子模型中,一个元素由内到外分别由 height + padding + border + margin组成,而clientHeight只取前面的height和padding。...什么意思呢,让我们来看一个例子: 可以看到,在用scrollHeight获取可滚动内容的高度时有这么一个坑,那就是当你不希望定位的后代元素被计算入滚动总高度的时候,使用scrollHeight...本来想着用盒子的scrollHeight去获取内容的高度,但是却导致了滚动条的抖动问题,原因是我让定位的后代元素随着滚动高度而改变位置和高度,导致scrollHeight获取到值发生改变,频繁地触发滚动条的刷新...有兴趣的小伙伴可以自己去试一下。

    7K10

    8 个 DOM 功能

    第三个参数是一个名为 useCapture 的布尔值,用于指示是否要使用事件冒泡或捕获【https://www.sitepoint.com/event-bubbling-javascript/】。...这肯定会在很多情况下派上用场,并且无需用 removeEventListener() 或使用其他一些复杂的技术来强制单个事件触发器。...如果你用过 jQuery,可能熟悉该库中的类似功能:.one() 方法。...可以通过修改代码中的数字更改值。 至于浏览器支持,似乎在兼容性上有些小问题,不过看上去现在几乎所有还在使用中的浏览器都支持可选参数功能,包括 IE10。...scrollHeight 和 scrollWidth 属性 scrollHeight 和 scrollWidth 属性可能听起来很熟悉,因为你可能会将它们与其他与宽度和高度相关的 DOM 功能混淆。

    2.7K20

    在FineReport中使用JS实现点击决策报表实现全屏效果

    昨天给我提了一个需求,将大屏界面嵌到目前的系统里,加一个全屏的功能。...因为大屏界面是使用决策报表制作的,所以我本来打算从报表本身入手,添加一个按钮可以全屏与退出全屏,可是这多出来的一个按钮在报表界面中实在太过突兀,没办法只好考虑其他方式。...在搜索文档的过程中,有一种解决方案是通过鼠标单击报表界面实现全屏与退出全屏,高度符合我的需求,于是乎就使用这样的方法了。...在设计器中打开决策报表,右边的组件设置中选择‘body’,然后选“事件-添加事件-点击”,如下图所示: [添加事件] 随后点击铅笔的图标,将以下代码复制进去: var docElm = document.documentElement...: [最终效果] 后来完成后又说只需要单击全屏,不能单击退出全屏以防误触,经过对代码的观察,我更改了if (document.body.scrollHeight === window.screen.height

    4.2K30

    JS常用代码块

    设置给任何层添加事件触发调用对象层的内容 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已经有一个

    3.8K31

    DOM 和 BOM 中的各种宽高属性

    先区分一下 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 属性返回的是一个属性可读写的对象

    2.4K10

    前端性能优化

    offsetTop、offsetLeft、 offsetWidth、offsetHeight、 scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop...事件节流(throttle)和防抖(debounce) 比如窗口的scroll和resize事件,一旦激活,会频繁触发相应的事件函数。频繁触发回掉函数导致的大量计算有可能引发页面抖动甚至卡顿。...为了规避这些风险,我们会采用事件节流或者防抖,来降低函数的触发频率。 节流:当事件第一次被触发时,在指定时间内,无论再次触发多少次,都会被忽略。也就是说,以第一次事件为准。...防抖:事件触发后,会延迟执行,在延迟时间内,如果事件再次被触发,上一次的事件被取消,以当次为准,重新延迟执行。也就是说,以最后一次事件为准。....} // 不推荐 // 浏览器会先查找所有的a标签,然后再找这些a标签中哪些有span父标签... div span a {...}

    1.1K30

    Merit价值和成果管理系统——1侧栏与iframe

    应该是前天晚上到凌晨,总算搞定了一个小小功能。...著名的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; } } 点击部门的右侧

    64820

    JavaScript开发中几个常用知识点总结

    前言   最近在做项目的时候自己写了一些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。

    64151

    scrollwidth和clientwidth_vue监听页面滚动

    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 也是类似道理。

    2.4K10
    领券