JQuery获取docWidth、docHeight、viewportWidth以及viewportHeight

最新推荐文章于 2024-03-14 17:14:40 发布
原创 最新推荐文章于 2024-03-14 17:14:40 发布 · 686 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #文档

本文介绍了如何使用JQuery来获取文档的宽度和高度(docWidth、docHeight)以及浏览器可视区域的宽度和高度(viewportWidth、viewportHeight)。通过简单的代码示例展示了如何利用$(document).width()、$(document).height()、$(window).width()和$(window).height()来实现这些功能。

之前一直迷惑JQuery为什么没有获取文档的高宽（docWidth、docHeight）以及可视区的高宽（viewportWidth、viewportHeight）。

原来是自己都还没弄清楚它的内在集成。总结起来就是：

docWidth = $(document).width();

docHeight = $(document.).height();

viewportWidth = $(window).width();

viewportHeight = $(window).height();

仅此以记。

js获取网页宽高
04-15
本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先，我们需要理解两个关键的概念：浏览器窗口（viewport）和文档（document）的尺寸。浏览器窗口是用户在屏幕上看到的部分，包括...
javascript获取网页高度宽度.rar
01-31
在JavaScript编程语言中，获取网页的高度和宽度是常见的需求，特别是在动态布局、页面滚动或响应式设计中。本文将深入探讨如何使用JavaScript有效地获取这些信息，并结合实际应用场景进行讲解。 一、窗口对象...
viewport
最新发布
weixin_55493330的博客
03-14 451
例如当前视口宽度为800px,1vw=8px。例如当前视口高度为800px,1vH=8px。viewport height简称VH。相对于当前视口分成100等份。相对于当前视口分成100等份。1vw=视口宽度/100。1vh=视口高度/100。
viewport属性各个参数
7iang | 麦冰棍
06-30 1352
viewport属性各个参数： 如实例： width：viewport 的宽度，可以指定为一个像素值，如：600，或者为特殊的值，如：device-width （设备的宽度）。 height：viewport的高度。 initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。 maximum-scale：允许浏览者缩放到的最大比例，一般设为1.0。 m
html如何适配设备高度,高度 | @viewport.height
weixin_29215391的博客
06-09 561
高度 | @viewport.heightheightCSS描述符是同时设置一个速记描述符min-height和max-height视口。通过提供一个视口长度值将把所提供的值设置为最小高度和最大高度。如果提供了两个视口值，则第一个值将设置最小高度，第二个值将设置最大高度。Related at-rule@viewport初始值as each of the properties of the sh...
视口（viewport）学习
weixin_43311440的博客
05-06 412
viewport 是用户网页的可视区域。即设备的屏幕上能用来显示我们的网页的那一块区域。 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> content里面的属性必须知道 width:控制viewport的大小，可以是指定的值，或者特殊值，如device-width表示设备指定宽度。 height:和width相对应，表示高度。 initial-scale ：初始化缩放比例，
viewport的使用
weixin_48306060的博客
04-27 452
viewport的使用 手机有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适合各种高端手机使用?学习html5 viewport能帮助我们实现这一点 <meta name="viewport" content="width=devive-width,intial-scale=1.0,maximum-svale=5.0,user-sclable=0" width=device- -width 设置 宽度为屏幕宽度 ...
将元素宽高分别赋值给docWidth和docHeight
05-31
您可以使用上面提到的 `getComputedStyle()` ...console.log('Width:', docWidth, 'Height:', docHeight); ``` 请注意，获取的宽高值包含单位（例如：px、rem 等），您可以使用字符串方法或正则表达式来提取数字部分。
var docWidth = document.body.clientWidth//网页可见宽 var docHeight = document.body.clientHeight//网页可见高，把这段代码改成元素宽高
05-31
假设要获取的元素的id为"elementId"，则可以使用以下代码来获取元素的宽度和高度： ``` var elementWidth = document.getElementById("elementId").clientWidth; // 元素可见宽度 var elementHeight = document....
document.onmousemove = (e) => { //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置 left = e.clientX - disX; top = e.clientY - disY; var docWidth = document.body.clientWidth //网页可见宽 var docHeight = document.body.clientHeight //网页可见高 if (top > docHeight - 210) { //超下边界(键盘DIV长宽分别为 295px、210px) top = docHeight - 210 } if (top < 0) { //超上边界 top = 0 } if (left > docWidth - 295) { //超右边界 left = docWidth - 295 } if (left < 0) { //超左边界 left = 0 } //绑定元素位置到positionX和positionY上面 //移动当前元素 odiv.style.left = left + 'px'; odiv.style.top = top + 'px'; };把这段代码改为不超过元素宽高
05-31
const docWidth = document.body.clientWidth; const docHeight = document.body.clientHeight; const elWidth = odiv.offsetWidth; // 获取元素宽度 const elHeight = odiv.offsetHeight; // 获取元素高度 if ...
meta viewport内容详解
zhuimengchizixinwx的博客
05-27 324
width ---- viewport的宽度(width=device-width意思是：宽度等于设备宽度) height ------ viewport的高度(height=device-height意思是：高度等于设备宽度) initial-scale ----- 初始的缩放比例 minimum-scale ----- 允许用户缩放到的最小比例 maximum-scale ----- 允许用户缩放到的最大比例 user-scalable ----- 用户是否可以手动缩放 ...
前端必知：20.相对单位及viewport视窗的认知
qq_52799985的博客
07-23 557
用户通过视窗可以看到浏览器渲染的内容常用于移动端的布局相对单位和viewport视窗在前端开发中扮演着非常重要的角色。它们为我们提供了灵活性和适应性，使我们能够创建响应式的网页和应用程序。相对单位，如em和rem，使我们能够根据父元素或根元素的字体大小来定义元素的大小。这种相对性非常有用，特别是在构建可扩展和可维护的布局时。例如，我们可以设置元素的宽度为50%或2em，而不必关心具体的像素值。这使得布局更具弹性，可以适应不同屏幕尺寸和设备。而vw和vh单位则是根据视窗的宽度和高度来定义元素的大小。
93、Viewport详解
sunnnnh的博客
08-04 4243
一、viewport概念 （1）移动端的viewport： 就是设备的屏幕上用来显示我们的网页的那一块区域； viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大（浏览器会出现横向滚动条），也可能比浏览器的可视区域要小。 （2）css中的1px并不是代表屏幕上的1px ： 分辨率越大（物理像素），css中1px代表的物理像素就会越多（css像素是viewport的一个小方格）； 手机屏幕的分辨率已经越来越高（物理像素），但屏幕尺寸却没有发生太大变化，必须让css中的1px代
图解ScrollViewer的ExtentHeight和ViewportHeigh
gqqnb的专栏
07-14 4096
ScrollViewer: http://msdn.microsoft.com/zh-cn/library/ms612678 作者爱让一切都对了 本文依照知识共享-署名-相同方式共享协议发布
ViewportWidth,Width,MeasuredWidth
dingdebao2012的博客
08-13 5845
1, ViewportWidth是vector图片的画布，相当于vector内容外面的盒子。如果ViewportWidth跟vector里面的width不一致，ViewportWidth也会影响最终的显示尺寸。如果当imageView的width,假设为widthM小于ViewportWidth， vector的内容会被scale，相当于width * （widthM/ViewportWidth）...
viewport的width值应该怎么设置
fustar925的博客
04-17 4189
前端响应式布局中我们常见设置viewport的width=device-width。但是，当我们看到一种新的viewport设置思路的时候，我们知道viewport的width也可以设置成一个固定值。详见：《响应式布局及设计-一种新的viewport设置观点》对于这个固定的值，我们该怎么设置呢？ 首先，我们先说说这个width的值，主要影响的是什么呢？根据我们以往的移动端开发经验往往网页的基础字号...
Viewport的宽度和高度
qq_35457469的博客
03-16 1010
Viewport的宽度和高度 &lt;/script&gt; //获取到html元素的大小 var clientWidth = document.documentElement.clientWidth; var clientHeight = document.documentElement.clientHeight; console.log('PC设备Viewport...
Android Vector曲折的兼容之路
热门推荐
eclipse_xu
07-06 2万+
Android Vector曲折的兼容之路两年前写书的时候，就在研究Android L提出的Vector，可研究下来发现，完全不具备兼容性，相信这也是它没有被广泛使用的一个原因，经过Google的不懈努力，现在Vector终于迎来了它的春天。 在文章后面，会给出本文的Demo和效果图，并开源在Github Vector DrawableAndroid 5.0发布的时候，Google提供了Vect
Viewport详解
Meskjei的博客
10-16 8189
移动端与桌面端最明显的区别就在于屏幕的大小。在比桌面端屏幕小不少的手机移动端上做web开发，网页的布局将会是一个全新的课题。因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–Viewport。 Viewport Viewport翻译成中文可以叫“视窗”或者是“视口”，它表示的是用户网页的可视范围（指页面能够被浏览的范围）。一个针对移动端优化过的网页的meta标签如下： &lt;meta na...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值