js获取网页文档坐标

网页尺寸与屏幕信息获取
最新推荐文章于 2021-06-05 01:16:13 发布
最新推荐文章于 2021-06-05 01:16:13 发布 · 87 阅读 · 0

本文提供了一段JavaScript代码，用于获取网页的各种尺寸信息及用户的屏幕设置详情，如分辨率、颜色深度等。通过该脚本可以了解网页可见区域的宽高、网页正文的宽高等关键数据。
<script>
function getInfo(){
var s = "";
s += "<br>网页可见区域宽："+ document.body.clientWidth;
s += "<br>网页可见区域高："+ document.body.clientHeight;
s += "<br><br>网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
s += "<br>网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "<br><br>网页正文全文宽："+ document.body.scrollWidth;
s += "<br>网页正文全文高："+ document.body.scrollHeight;
s += "<br><br>网页被卷去的高："+ document.body.scrollTop;
s += "<br>网页被卷去的左："+ document.body.scrollLeft;
s += "<br><br>网页正文部分上："+ window.screenTop;
s += "<br>网页正文部分左："+ window.screenLeft;
s += "<br><br>屏幕分辨率的高："+ window.screen.height;
s += "<br>屏幕分辨率的宽："+ window.screen.width;
s += "<br><br>屏幕可用工作区高度："+ window.screen.availHeight;
s += "<br>屏幕可用工作区宽度："+ window.screen.availWidth;
s += "<br><br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
aa.innerHTML = s;
}
</script>
<body onload="getInfo();">
<span id="aa"></span>
</body>
iteye_15883
关注
JS 获取坐标
skysys的研究小屋
03-03 546
可能存在事实误导[尤其是兼容性，建议自行测试]（如有错误还请不吝赐教~博主将会及时订正 参考文献在文末列出，更多细节请看参考材料 鼠标 共有：event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y十种。 pageX：鼠标指针距离文档左侧边缘的距离，随滚动条变化而变化 【兼容性：所有浏览器均支持...
javascript获取文档坐标和视口坐标
10-24
在网页制作过程中，了解和使用JavaScript来获取元素的文档坐标和视口坐标是一项基础且非常重要的技能。坐标系统用于描述元素在网页中的位置，这对于布局定位、动画制作、交互事件处理等场景至关重要。根据不同的需求...
js 页面获取坐标点
akon_vm的专栏
02-13 2172
无标题文档 $( function() { var d3 = $("#d3"); var d2 = $("#d2"); var d1 = $("#d1"); $(d2).hide(); $(d1).mousemove( function() { var x = event.offsetX; var y = event.offsetY; var a
js 页面中 坐标，位置
terryjs
10-08 242
  &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/javascript"&gt; function mouseCoordination(michael){ //以下主要是对不同浏览器进行兼容操作 if(michael.pageX || michael.p...
js获取网页的鼠标坐标
qq_36617310的博客
02-23 468
//相对于整个网页的坐标           $(document).click(function(event){                 var e = event || window.event;                 var scrollX = document.documentElement.scrollLeft || document.body.scrollLef
js获取页面控件坐标.pdf
09-27
JS 获取页面控件坐标 在 HTML 文档中，获取页面控件坐标是非常重要的，特别是在进行交互式开发时。今天，我们将讨论如何使用 JavaScript 获取页面控件坐标。 在 HTML 文档中，每个元素都有其自己的坐标系，通过...
pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_
09-30
`pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_`这个项目就是针对这一需求而设计的，它利用了PDF.js库来实现PDF文档的关键字坐标获取功能。 PDF.js是Mozilla开发的一个开源JavaScript库，用于在Web浏览器...
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
10-27
本知识点将详细介绍如何通过JavaScript获取鼠标的坐标位置。JavaScript是一种广泛应用于网页前端的脚本语言，它能够实现各种浏览器事件处理，包括鼠标事件。 首先，需要了解的是鼠标事件。在鼠标事件中，常见的如`...
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
10-27
为了实现这一点，JavaScript提供了多种方法来获取元素相对于文档顶部的位置，具体来讲就是获取元素的横向和纵向坐标。文章总结了两种常用方法，分别是通过offsetParent属性和getBoundingClientRect()方法。 首先，...
js进阶（BOM-网页坐标，窗口偏移实现案例）
qq_53926719的博客
04-07 444
BOM BOM概述 bom即为浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是windows，windows是最大的，所以BOM包含DOM 常见事件 窗口加载事件 等页面加载完再执行的事件，包含页面dom元素，即整个dom树加载完毕。所以不存在命名调用的顺序。 DOMConteneLoaded是DOM元素加载完毕，不包含图片，flash等就可以执行，速度更快 调整窗口大小事件 窗口大小发生像素变化，就会触发该事件，即有些页面放大缩小就会改变样式。 一般用来完成响应式布局。wind
html 选中文字坐标,JS脚本获取Div选中文字在整篇文章的起始位置(start)和结束位置(end)...
weixin_42360905的博客
05-31 981
原帖地址：http://www.mockte.com/rewrite.php/read-86.html目前我开发的一个PHP系统中需要在div中截取文章被选文字的起始位置的功能。但是很遗憾，google、baidu了很多资料都非常不理想，于是自己深入研究了一下Selection对象，做了个针对IE的版本，相信能帮助需要这类功能的朋友，主要代码如下：function getSel(){var ele...
获取网页某个元素坐标的方法
热门推荐
数据之旅的点点滴滴
10-24 1万+
用python的selenium写爬虫通过绝对坐标点击，坐标的获取方法（谷歌浏览器）： 网页F12打开源代码，在console窗口输入 document.querySelectorAll('css选择器')[0].getBoundingClientRect().left + document.documentElement.scrollLeft document.querySelectorAl...
HTML5网页页面坐标获取
u013236896的博客
06-27 4261
body{ background-color: darkgrey; font-family: Arial, Helvetica, sans-serif; } function mycoordinary(e){ var x= e.clientX; var
获取元素到文档区域document的坐标的两种方法总结
weixin_30436101的博客
05-16 324
获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较 在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法： 一：通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时，了解到要获取某个元素在页面上的偏移量，需要将这个元...
网页H5获取当前坐标，完整demo
云上人间钦自赏
08-23 6815
先展示效果： 手机运行效果很好，也很准，电脑嘛，有时超时，有时偏出80多公里。 css部分： #allmap { overflow: hidden;margin:0;z-index: 10; } .savept{position: fixed;left:40%;z-index: 11;} .mapbox{display: none;} 网页js代码： var
实现网页上的坐标查询
拔萝卜的码农
02-28 1235
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function fun(e){  //获得当前坐标  var x,y;  x=e.clientX;  y=e.clientY;  document.getElementById("
获取html元素在页面上的坐标,用js获取页面中某个元素在浏览器可视窗口中的坐标(位置)...
weixin_30387211的博客
06-05 1443
getBoundingClientRect这个函数可以获取元素到浏览器视窗知个位置的值, 注意是浏览器不是页面如果想取到页面的距离如:左边或顶部有滚动条滚动进去的情况就要自己加对应的下面的卷进去的值啦document.documentElement.scrollTopdocument.documentElement.scrollLeft可以通过这个函数来获取obj.getBoundingClien...
pdf.js获取标题所在文档中的坐标
最新发布
04-05
### 使用 pdf.js 获取文档标题坐标的教程 pdf.js 是一个功能强大的工具库，用于在 Web 浏览器中显示 PDF 文件。要获取 PDF 文档中的标题及其坐标，可以通过解析页面内容并定位到特定的文本区域来实现。 以下是具体的方法说明： #### 解析 PDF 页面内容 PDF 的每一页可以被解析为多个文本片段，这些片段包含了位置信息（如左上角坐标 `x` 和 `y`）。通过遍历这些文本片段，可以根据其内容判断是否为目标标题，并记录对应的坐标。 ```javascript // 加载 PDF 文档 PDFJS.getDocument('example.pdf').then(function(pdfDoc) { // 遍历每一页 const pageNumber = 1; // 假设我们只关注第一页 pdfDoc.getPage(pageNumber).then(function(page) { // 设置缩放比例 const scale = 1.5; const viewport = page.getViewport({scale: scale}); // 获取文本内容 page.getTextContent().then(function(textContent) { textContent.items.forEach(function(item, index) { // 判断当前文本项是否为标题 if (/^标题\s*\d+$/.test(item.str)) { // 正则匹配标题格式，例如 "标题1" console.log(`找到标题 "${item.str}"`); // 输出标题的位置信息 console.log(`X坐标: ${item.transform[4]}, Y坐标: ${viewport.height - item.transform[5]} (相对于视口)`); // 如果需要进一步操作，比如高亮该标题 highlightTitle(viewport, item); } }); }); }); }); ``` #### 关键点解释 - **getTextContent()**: 这是一个异步函数，返回当前页面上的所有文本片段以及它们的位置信息[^2]。 - **transform 属性**: 每个文本片段都有一个 `transform` 数组，其中 `[4]` 表示 X 轴偏移量，`[5]` 表示 Y 轴偏移量。注意 Y 轴是从顶部向下计算的，因此通常需要将其转换为相对于视口底部的距离。 - **正则表达式匹配**: 上述代码假设标题遵循某种命名模式（如 “标题1”，“标题2”），实际应用中可能需要调整正则表达式的定义以适配不同的标题样式[^4]。 #### 示例：高亮目标标题 如果希望在网页上直观地展示某个标题的位置，可以结合 HTML Canvas 实现简单的高亮效果。 ```javascript function highlightTitle(viewport, item) { const canvas = document.getElementById('pdf-canvas'); const ctx = canvas.getContext('2d'); // 将 PDF 坐标映射到画布坐标 const x = item.transform[4]; const y = viewport.height - item.transform[5]; // 反转Y轴方向 const fontSize = Math.sqrt((item.width || 0)**2 + (item.height || 0)**2); // 绘制矩形框作为高亮标记 ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.strokeRect(x, y - fontSize, item.width, fontSize); } ``` 上述代码会绘制一个红色边框围绕指定的标题文字[^3]。 --- ### 注意事项 - 不同 PDF 文件的结构可能存在差异，某些复杂布局可能导致无法精确识别标题。此时可考虑增加额外的过滤条件或手动标注辅助数据。 - 对于大规模或多页 PDF 处理场景，建议优化性能，避免一次性加载过多资源影响用户体验。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值