首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取屏幕以及元素高的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的:...window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关 网页可见区域:...document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域:document.body.offsetWidth (包括边线的...) 网页可见区域高:document.body.offsetHeight (包括边线的) 网页正文全文:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight...event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的

6.8K20
您找到你想要的搜索结果了吗?
是的
没有找到

js获取各种距离和

, 距离元素顶部的距离 offsetY 以当前的元素的左上角为原点, 距离元素左侧的距离 clientX 以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口...以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离 元素高及各种距离...高 属性 说明 clientHeight/clientWidth 包括元素的可视部分的高度/宽度包括width/height和padding不包括border和滚动条如果是content-box,则为...width+2*padding如果是border-box,则为width-2*padding offsetHeight/offsetWidth 包括元素的width/height+padding+border...(fixed/relative/absolute)的父元素的顶部/左侧的距离 scrollTop/Left 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离,也就是元素滚动条被向下

9810

详解各种获取元素高及位置的属性

通常,元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before或:after等伪类元素的高度。...元素的顶部的距离。...一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。...scrollLeft Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。...没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的border和margin。

3.7K80

JavaScript与jQuery获取元素、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。...可视高 clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身高 offsetHeight...) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹高 scrollHeight :整个元素的高度(包括带滚动条的隐蔽的地方...元素高 width() :获得或设置元素【内容】的;若元素的display:none,其值为0 height() :获得或设置元素【内容】的高;若元素的display:none,其值为0 innerWidth...浏览器相关高 $(window).height() :获取浏览器可视窗口的高度; $(document).height() :获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是 $(window

2.9K00

js 实现元素拖拽

概述 js 实现拖拽,主要使用元素的 onmousedown、onmousemove、onmouseup 三个事件实现。...1、onmousedown:鼠标按下事件 2、onmousemove:鼠标移动事件 3、onmouseup:鼠标抬起事件 实现思路 我们当左键点击时,需要记录当前的鼠标点击位置相对于该元素左上角的x,y...坐标,这里我们使用diffX和diffY来表示 然后我们移动时需要不断计算当前元素距离浏览器左边和上边的距离; 同时给元素进行赋值; 当鼠标抬起时,取消鼠标移动事件和鼠标抬起事件。...id="drag"> window.onload = function () { //获取drag元素...clientX 和 clientY 默认是以元素左上角位置来计算的,这里需要向左向上同时减去鼠标点击的位置差,从而可以保证鼠标始终显示在拖拽元素时的位置

9.6K30

原生js添加元素

今天做页面使用的mui,因为使用mui情况下无法使用jquery,于是在ajax请求完毕添加元素的时候发现自己竟然对原生js添加元素的方法有点模糊了,真是越活越倒退了,赶紧整理一波。...首先最简单的innerHTML,这个不想多说,入门新手喜欢这么用,但他的缺点也很明显:不管你渲染部分还是全部,始终需要替换原先所有的子元素,也就是需要重复渲染,会增加浏览器压力。...接下来就是正题了,js推荐是这样进行元素添加: 1.创建游离元素节点:let div=document.createElement(“div”); 2.给创建元素添加属性:div.setAttribute...className”);注意setAttribute一次只能设置一条属性 3.创建文本节点:let textNode=document.createTextNode(“需要添加的文本”); 4.将文本节点添加到元素节点中...div.appendChild(textNode); 5.加元素节点插入文档:Parent.appendChild(div); over 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

8.9K20

JS如何替换元素内容

,有的是动态的,特别是在一些网页交互的网页特效里,应用比较多,如何简单的替换元素的内容 01 原生JS实现 在原生js中主要通过DOM提供的属性去修改的,遵循js的一个使用规范,获取元素,绑定事件,操作...v-model="input" clearable> 替换元素...input-wrap { display:flex; justify-content: center; margin-bottom: 20px; } 分析 在原生js...当中,innerHTML是DOM元素对象一个非常重要的属性,可以获取元素整个节点的内容,包括标签元素,表示元素的所有内容,包括子元素,文本等 注意要与innerText区分,innerText只可以获取文本节点内容...,如果仅是修改DOM元素节点文本内容,使用innerText也是可以的 而在vue里面,并不是通过操作DOM去实现的,而是操作数据,通过操作数据实现的,与原生js的使用是有差异的

10.7K20

js如何引用同级元素

具体效果 示例效果 https://coder.itclan.cn/fontend/js/17-yinyong-tongji-elem/ 具体描述 在网页中,同级(兄弟)元素,指的是拥有相同的直接父级元素元素...,并且往往指的是同类的元素,同类元素在实际开发中遇到的比较多 比如:列表li,并列的按钮等,当需要做一些特殊的效果时,可以对其他同级的元素进行一些操作,满足特定的网页要求 比如:隔行填充颜色等 原生方法实现...以下是通过原生js实现,点击按钮时,获取按钮的值 // 获取同级按钮元素的value function getLevelBtnVal(btn) { var p = btn.parentNode...,同级元素拥有相同的父级元素都是p,那么就可以得到除自身以外的的同级元素,如果还需要排除同一类别的话,那么可以使用节点的nodeType属性来加以区别 Vue版本实现 在Vue里面,就不用类似原生js的...实现是比较简单的,但是原生js的操作依旧还是要知道的

7.8K40
领券