JS中各种尺寸的获取

最新推荐文章于 2023-10-11 10:43:39 发布
最新推荐文章于 2023-10-11 10:43:39 发布
阅读量437 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45959504/article/details/104715731
版权
本文介绍了JavaScript中用于获取页面和元素尺寸的各种属性，如clientWidth/clientHeight、offsetWidth/offsetHeight、scrollWidth/scrollHeight以及鼠标事件中的screenX/screenY、clientX/clientY等。详细阐述了它们的区别和应用场景，强调了在滚动条存在时的尺寸计算关系。
摘要由CSDN通过智能技术生成

JS中各种尺寸的获取
页面上的尺寸获取

  • clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。
    在这里插入图片描述
  • offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。
    在这里插入图片描述
  • offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的偏移量，父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。
    在这里插入图片描述
  • scrollWidth/scrollHeight——当产生滚动条时，元素里边全文内容的宽度或高度，包含溢出的文本的尺寸，也就是包含可滚动的距离(scrollTop/scrollLeft)。
  • scrollTop/scrollLeft——滚动的距离到顶部或左边的位置。(可设置)
最低0.47元/天 解锁文章
A-Select °
关注
JS调用浏览器不能全屏适应A4纸解决办法
Eling
05-29 1765
引入JQ：<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 打印方法： // 打印 function preview(){ bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="&l...
div 设置a4大小_javascript – 拉伸div到A4大小
weixin_39668199的博客
12-18 924
您可以通过css设置div尺寸以使其适合A4尺寸的纸张CSS：body {margin: 0;padding: 0;background-color: #FAFAFA;font: 12pt "Tahoma";}* {box-sizing: border-box;-moz-box-sizing: border-box;}.page {width: 21cm;min-height: 29.7cm;pa...
在javascript中得到当前窗口的高和宽
yicel的专栏
12-18 734
    var     s   =   "";     s   +=   "/r/n网页可见区域宽："+   document.body.clientWidth;     s   +=   "/r/n网页可见区域高："+   document.body.clientHeight;     s   +=   "/r/n网页可见区域宽："+   document.body.offsetWidth  
JS取各种尺寸的方法
赵亮的博客专栏(theforever，碧海情天)
07-11 1128
JS取浏览器和网页可见区高和宽 ：     var      s    =    "网页可见区域宽："+    document.body.clientWidth;    s    +=    "\r\n网页可见区域高："+    document.body.clientHeig
JS 获取各种尺寸
mixi9760的博客
07-22 407
屏幕分辨率的高和宽 屏幕可用高和宽度 浏览器窗口可视区域大小 网页尺寸scrollHeight 网页尺寸offsetHeight屏幕分辨率的高和宽window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位以像素计。 2. window.screen 对象在编写时可以不使
javascript 获取图片尺寸及放大图片
10-26
在JavaScript中，获取和处理图片尺寸以及放大图片是常见的需求，尤其在网页开发中。本文将详细介绍如何在不设置图片宽高的情况下获取图片尺寸，并探讨一种利用IE私有属性防止图片放大失真的方法，以及Firefox和...
JavaScript获取图片的原始尺寸以宽度为例
10-25
在JavaScript中，获取图片的原始尺寸，特别是宽度，是一个常见的需求。...通过使用`naturalWidth`和`naturalHeight`属性，以及在旧版IE中利用`Image`对象和`onload`事件，可以确保在各种情况下正确获取图片的原始尺寸。
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
总之，理解和掌握JavaScript中的DOM元素位置和尺寸获取方法是Web开发中的基本技能，这对于创建交互式、响应式的网页至关重要。通过熟练运用这些属性和方法，开发者可以实现各种创新的效果，提升用户体验。
Javascript、Jquery获取浏览器和屏幕各种高度宽度
QAQ_Monk的博客
09-24 415
Javascript:   IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见
使用Vue @media print在JavaScript中插入不同尺寸的打印页面，可自定义尺寸大小和打印机配置
曲江涛的博客
05-15 4599
在开发Web应用程序时，经常需要提供打印功能。Vue框架提供了@media print媒体查询，可以根据打印需求自定义打印页面的样式和尺寸。本文将指导您如何在Vue项目中使用@media print和JavaScript来插入不同尺寸的打印页面，并让您能够自定义尺寸大小和打印机配置。本文介绍了如何在Vue项目中利用@media print和JavaScript插入不同尺寸的打印页面，并允许自定义尺寸大小和打印机配置。通过创建一个Vue组件，我们可以在页面中添加按钮，用于选择要打印的尺寸。
打印A4纸大小像素计算
最新发布
qq_43527485的博客
10-11 435
29.7cm，而1英寸=2.54cm，如果屏幕DPI分辨率为72像素/英寸，换算一下：相当于1cm可呈现。297mm，也就是21.0cm。A4纸的尺寸是210mm。
JS获取屏幕分辨率以及当前对象大小等
weixin_30408165的博客
08-24 297
1 <script type="text/javascript"> 2 function getInfo(){ 3 var s = ""; 4 s += " 网页可见区域宽："+ document.body.clientWidth+"\n"; 5 s += " 网页可见区域高："+ document.body.cl...
[转载] 厘米转像素
weixin_30556959的博客
09-30 556
厘米(CM): 分辨率(DPI): 像素(PX): 打印常识：A4纸张在显示器上应该要多少像素？ A4纸的尺寸是210mm×297mm，也就是21.0cm×29.7cm，而1英寸=2.54cm，如果屏幕DPI分辨率为72像素/英寸，换算一下：相当于1cm可呈现 (72px/2.54cm) = 28.34px 下面是一些常用分辨率下A4纸在屏幕上的像素尺寸： 分辨率是...
打印 手动设置页面打印高度自动分页(需设置纸张高度)
Mzhaocai的博客
09-19 2670
仅做个人项目记录 , 略微混乱 ,仅做参考 (另一种版本 设置页面打印固定条数 参考 https://www.cnblogs.com/tenie/p/4851772.html) 大致原理 ------模板化 -- 头尾中间数据加一起总高度小于A4纸高度, 打印前序列化一次, 获取每个列的高度加一起,数据过多自动换行高度自动变化, 打印分页 使用 &lt...
JS获取img图片的原始尺寸高度和宽度
彭世瑜的博客
05-18 2万+
目录方式一：obj.style.width方式二：width/height方式三：offsetWidth/clientWidth方法四： getComputedStyle和 currentStyle方式五：Image对象方法六：naturalWidth方式七：兼容写法 方式一：obj.style.width 通过img对象的style属性获取，如果没有设置style，将返回空 <img class="image" style="width: 100px; height: 200px;
vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置
j123450的博客
08-13 2万+
业务需求 在开发时，遇到需求打印时既能切换A4纸张，又能切换成凭证纸张。而使用 @media 设置尺寸后，影响所有页面，无法实现打印多尺寸的问题。 打印技术 使用浏览器自带的 print 打印技术 打印基础 使用此语法即可完成调出浏览器实现局部打印 startprint 和 endprint 设置打印的内容，只会打印两者包含的部分。 <!--startprint--> <div class="data_page"> {{打印内容}} </div&g
如何获取屏幕DPI/PPI并计算A4纸在屏幕的大小
martin.wang
10-07 2923
DPI（英语：Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数字图像，意思是指每一英寸长度中，取样或可显示或输出点的数目。如：打印机输出可达300DPI的分辨率，表示打印机可以在每一平方英寸的面积中可以输出300X300＝90000个输出点。 打印机所设置之分辨率的DPI值越高，印出的图像会越精细。打印机通常可以调校分辨率。例如撞针打印机，分辨率通常是60至90 DPI。喷墨打印机则可达300~720 DPI。激光打印机则有600~1200 DPI。
html打印A4长宽设置
热门推荐
Peak Xin's Blog
05-15 3万+
测试使用chrome浏览器 1、边距为无 <style> /* 布局纵向 */ .a4-endwise{ width: 1150px; height: 1627px; border: 1px #000 solid; } /* 布局横向 */ .a4-broadwise{ width: 1627px; height: 1149px; border: 1px #0
JavaScript全面解析：获取页面与屏幕尺寸方法
"本文主要介绍如何使用JavaScript获取页面和屏幕的各种尺寸参数，包括窗口大小、浏览器视口尺寸、滚动条位置以及元素的宽高。这些信息对于网页布局和响应式设计至关重要。" 在JavaScript中，我们可以使用不同的属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值