JavaScript中各种宽高总结

最新推荐文章于 2022-01-05 12:22:50 发布
最新推荐文章于 2022-01-05 12:22:50 发布
阅读量144 收藏
点赞数
分类专栏： JavaScript 文章标签： css js 宽高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43534005/article/details/89811152
版权

1、只读

属性描述
clientWidth/heightcontent+padding
offsetWidth/heightcontent+padding+border
clientTop/Leftborder
offsetTop/Left距离自己最近的定位父元素的上边或左边距离
scrollHeight和scrollWidth这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。

2、可读可写

属性描述
scrollTop和scrollLeft这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。
obj.style.*属性能够获取到该元素的行内样式

3、坐标类

属性描述
clientX和clientY这对属性是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标
screenX和screenY鼠标相对于屏幕的坐标
offsetX和offsetY鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标
pageX和pageY鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的
IIIlion
关注
专栏目录
javascript中BOM基础知识总结
10-20
它们不同于`style.width`和`style.height`，后者仅获取或设置行内样式的宽高，且返回值为带单位的字符串。`offsetWidth`和`offsetHeight`是只读的数值属性，可用于获取元素的实际尺寸。 4. **`location`对象**：...
js 获取屏幕各种宽高的方法(浏览器兼容)
10-27
在Web开发中，获取屏幕和网页元素的各种宽高信息是常见的需求，以便进行页面布局、元素定位和动态调整等操作。JavaScript为此提供了丰富的接口，但不同的浏览器对这些接口的支持度有所差异，这就要求开发者编写兼容...
js中的各种宽高以及位置总结
weixin_30389003的博客
01-28 287
在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时，由于这些属性概念较多，加上浏览器之间 实现方式不同，常常会造成概念混淆，经过研究之后，这里来进行一个总结。 第一部分：DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性，该属性只能通过js去获取而不...
js各种宽高的总结
weixin_30867015的博客
10-18 44
1.clientWidth和clientHeight指元素的可视部分宽度和高度，就是padding+content如果没有滚动条，就是设定的宽度和高度 如果有滚动条，就是设定的宽度和高度减去滚动条的宽度和高度 body{ border:20pxsolid#ccc; margin:10px; paddin...
js学习日记-各种宽高总结（配图）
weixin_30914981的博客
03-06 60
1.窗口和浏览器 window.innerWidth、window.innerHeight 浏览器内部可用宽高 window.outerWidth、window.outerHeight 浏览器整体宽高 window.screenTop(Firefox采用screenX) 浏览器左上角距离屏幕顶端的距离(IE、Opera、Chrome中如果紧贴屏幕顶部的话，则Top为浏...
js中各种宽和高
m0_53438035的博客
08-19 324
屏幕尺寸（screen） window.screen.heiht和window.screen.availHeight window.screen.width=window.screen.availWidth 浏览器尺寸（inner和outer） window.innerHeight和window.outerHeight window.innerWidth和window.outerWidth window.innerWidth会受开发者工具影响 截至上述所有均包含滚动条 页面尺寸（client和off
js中各种宽高以及位置总结
THINK_OF_的博客
02-05 682
只读属性 1.clientHeight与clientWidth 指的是元素的可见宽高,padding+content 注意：如果出现滚动条，就需要减去滚动条的宽度或者高度 例如：元素宽高都是200px;overflow:auto;当内容超出会出现垂直滚动条，这时clientWidth就会小于200px;   2.offsetHeight和offsetWidth 指的是元素bord
javascript窗口宽高,鼠标位置,滚动高度(详细解析).docx
01-18
### JavaScript窗口宽高、鼠标位置、滚动高度详细解析 #### 一、概述 在Web开发中，经常需要获取浏览器窗口的尺寸、鼠标的位置以及页面滚动的距离等信息。这些信息对于响应式设计、交互效果实现等方面至关重要。本...
javascript获取网页各种高宽及位置的方法总结
01-21
screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window...
javascript 各种宽高
肖皓文
06-27 217
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth ...
JavaScript及jQuery中的各种宽高属性图解
上下求索
12-23 2867
原文链接 http://blog.poetries.top/2016/12/13/js-props 声明：本文根据慕课网学习视频整理 强烈建议打开控制台自己动手练习一遍，这样印象才会深刻第一部分 JavaScript中的宽高属性一、与window相关的宽高属性1.1 window.location和document.location window对象的location属性引用的是locatio
JavaScript计算字符串文本的宽度
ywl_156的博客
01-05 3658
JavaScript计算字符串的宽度 在使用canvas制作动画时，经常需要获取字符串的宽度与边缘进行对比，以下是通过js来获取任意字符串宽度的方法： function getTextWidth(text, fontSize) { // 创建临时元素 const _span = document.createElement('span') // 放入文本 _span.innerText = text // 设置文字大小 _span.style.fontSize = fontSize + 'px
js获取宽高
小木Blog
07-14 1098
有一个问题 且看题目， 写的是获取宽高， 所以应该有一个隐含的谓语， 获取谁的宽高？本文中， 要获取三个东东的宽高。 所以没有写谓语。 获取哪三个的宽高 屏幕 浏览器window窗口 页面元素 获取屏幕的宽高 对于一个页面， 最外层对象是window。 在window对象上有一个screen对象。 该对象中存有关于我们电脑屏幕的信息。 关于宽高的信息如下 window....
JS中获取标签的宽和高
_陌默
11-01 4264
var oText = document.getElementById('text');  oText.style.width： 在JS中如果想要通过它来获取标签的宽度时，只有当该标签的宽度设置在HTML中通过style来设置时才可以实现。getComputedStyle(oText.width) ：获取到的是经过计算机或浏览器计算后的样式，但是在IE6，7，8下不兼容此时可以用oText.
js中的各种宽高
阿七的博客
09-27 752
额。前几天因为电脑屏幕被我坐坏了，没有办法更（借口借口，坏了三天而已，自己懒） 我自己也是新人，如果有哪里说的不对的话，希望大家能够留言批评纠正，谢谢大家！（虽然没有几个人看） 言归正传,今天说说各种宽高，和各种距离 1样式宽/高（ style.width/style.height） 同时说明，这个值通过document.getElementById("id").style.width
JS 获取html元素宽高 及设置宽高
热门推荐
博客
02-13 3万+
获取浏览器的宽高： var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.bod...
用JavaScript设置宽度高度为100%
wangweiscsdn的博客
12-23 9098
有的时候会有特殊情况需要用js来设置宽度高度为100%，代码如下： function init(){ var a=document.getElementById("test"); a.style.width="100%"; a.style.height="100%"; } window.onload=init;
web前端入门到实战：JavaScript中尺寸类样式
软件开发-前端开发-IT
09-18 145
一：鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素的各项尺寸时Height,Width 1：检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候，鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离 clientX:鼠标事件发生的位置距离浏览器可视区域...
JavaScript宽高属性详解：实例演示与应用
本文深入探讨了JavaScript中关于元素宽高属性的实现，涵盖了多个关键概念和常用属性。首先，对于窗口对象(window)和文档对象(document)，它们之间的关系是window对象包含了Document对象，例如可以通过`window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值