JS 尺寸相关

最新推荐文章于 2020-11-17 10:51:19 发布

boonyaxnn

最新推荐文章于 2020-11-17 10:51:19 发布

阅读量362

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/boonyaxnn/article/details/89385729

版权

JavaScript 专栏收录该内容

90 篇文章 0 订阅

订阅专栏

1、获取视口的宽高

①含滚动条

window.innerWidth
window.innerHeight

②不含滚动条

document.documentElement.clientWidth
document.documentElement.clientHeight

2、获取文档的滚动距离

document.documentElement.scrollTop ||  document.body.scrollTop
document.documentElement.scrollLeft || document.body.scrollTop

3、获取元素的滚动距离

ele.scrollTop
ele.scrollLeft

4、获取元素的尺寸

①含边框

ele.offsetWidth
ele.offsetHeight

② 不含边框

ele.clientWidth
ele.clientHeight

5、获取当前元素距离已经定位的父元素的水平/垂直距离

ele.offsetLeft
ele.offsetTop

6、浏览器的大小

 window.outerHeight
 window.outerWidth

7、获取鼠标在视口内的坐标

 event.clientX
 event.clientY

8、获取鼠标在界面内的坐标

 event.pageX
 event.pageY

9、获取浏览器距离屏幕左顶点的距离

window.screenX
window.screenY

10、获取鼠标距离屏幕左顶点的距离

event.screenX
event.screenY

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boonyaxnn

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS中各种尺寸的获取

01-08

JS中各种尺寸的获取页面上的尺寸获取 clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。 offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。 offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的偏移量，父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。 scrollWidth/s

使用js获取图片原始尺寸

10-25

在给出的文件内容中，有一个使用JavaScript代码片段来获取图片原始尺寸的示例。我们可以通过分析这段代码来学习如何实现该功能。首先，页面上会插入一个img标签，该标签在展示的时候通过style属性指定了一个宽度和...

参与评论您还未登录，请先登录后发表或查看评论

JS中的各种尺寸

aliven1的博客

12-15

1056

屏幕可视区尺寸： document.documentElement.ClientWidth||document.body.offsetWidth; document.documentElement.ClientHeight||document.body.offsetHeight;

js中的尺寸

qq_43661347的博客

12-13

310

浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条) 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight - 浏览器窗口的可见高度 window.innerWidth - 浏览器窗口的可见宽度对于 Internet Explorer 8、7、6、5： document.documentEl...

Javascript、Jquery获取浏览器和屏幕各种高度宽度

QAQ_Monk的博客

09-24

417

Javascript: IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见

JS中各种尺寸的用法大全

wxd_97的博客

03-05

2461

**JS中各种尺寸的获取** 页面上的尺寸获取 clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。 offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、bord...

用JavaScript获取DOM元素位置和尺寸大小的方法

10-27

本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...

JavaScript简单获取页面图片原始尺寸的方法

10-22

此外，了解一些JavaScript与图片处理相关的知识点也是必要的。例如，`CSS`中的`object-fit`属性可以用来调整图片在容器中的填充方式，`background-size`可以控制背景图片的尺寸，还有`naturalWidth`和`naturalHeight...

原生JS获取元素的位置与尺寸实现方法

10-19

原生JavaScript（JS）是Web开发中不可或缺的一部分，它允许开发者在不依赖任何外部库或框架的情况下，通过JavaScript代码直接操作DOM（文档对象模型），从而获取页面中元素的位置和尺寸信息。掌握如何使用原生JS来...

JS测试显示屏分辨率以及屏幕尺寸的方法

12-02

在JavaScript中，我们可以使用内置对象`screen`来获取用户的设备屏幕的相关信息，包括分辨率和屏幕尺寸。`screen`对象提供了多种属性，如`width`和`height`，用于获取屏幕的水平分辨率和垂直分辨率（单位为像素）。...

<Js>windows 尺寸

大草包的博客

06-04

459

window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度IE 8、7、6、5： document.documentElement.clientHeight document.documentElement.clientWidth或 document.body.clientHeight document.body.clientWidt

常用长宽高~

^_^-Beluga, ^_^-Stefli

11-10

1202

s += "/r/n网页可见区域宽："+ document.body.clientWidth; s += "/r/n网页可见区域高："+ document.body.clientHeight; s += "/r/n网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)"; s += "/r/n网页可见区域高："+ doc

JS的屏幕尺寸

nsource的专栏

05-04

676

〈script〉function show() { var s = "网页可见区域宽："+ document.body.clientWidth; s += "/r/n网页可见区域高："+ document.body.clientHeight; s += "/r/n网页可见区域高："+ document.body.offsetWidth +" (包括边线的宽)"; s += "/r/n网页可见区

js获取屏幕大小

纳川的博客

11-17

2110

$(document).ready(function() { alert('屏幕分辨率为：' + screen.width + '*' + screen.height); alert('屏幕分辨率为：' + window.screen.width + '*' + window.screen.height); alert('屏幕可用大小：' + screen.availWidth + '*' + screen.availHeight); ..

JS得到页面的各种尺寸

hong0101的专栏

11-18

711

1、offsetLeft 假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。 obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 obj.offsetHeight 指 obj 控件自身的高度

JS取屏幕尺寸汇总

weixin_30851867的博客

07-20

113

var bodyWidth =document.body.clientWidth; //网页可见区域宽 var bodyHeight =document.body.clientHeight; //网页可见区域高 var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) var bodyHeightWit...

在ie, firefox, chrome上用js 获取页面的高度

日々精進

03-06

466

function getInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s += " 网页可见区域高："+ document.body.clientHeight; s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"

JS中的各种尺寸问题

超胆孤侠

08-30

639

1鼠标 clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于浏览器内容窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，也就是说，他计算left或top时直接忽略

关于原生js的位置操作以及尺寸操作

小白变怪兽

11-19

1567

原生js的位置以及尺寸操作 —— offset scroll client

JavaScript 滚动与元素尺寸完全解析

本文将深入探讨JavaScript中与元素尺寸和位置相关的几个关键属性，包括`scrollLeft`, `scrollWidth`, `clientWidth`, `offsetWidth`以及事件处理的相关知识。 1. `scrollLeft` 和 `scrollTop` 这两个属性用于设置...