js 获取点击元素的相对位置

2024-11-03

[原]js获取dom元素的实际位置及相对坐标

关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect 用法: var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left); 获取相对位置: var bodyRect

页面中php传值后循环列表js获取点击的id

页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script> <script type="text/javascript"> function jump(id) { window.location.href = "/shengchan/zhlhfk/Adm

js 获取iframe页面元素

js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon  <iframe id="myframe" src="<c:url value="/base/server/report/report.do?REPORT_ID=${param.REPORT_ID}"/>" height="100%" wi

JS获取HTML DOM元素的方法

JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document.getElementsByTagName("标签名"); 3.根据className获取标签列表: document.getElementsByClassName("类名"); 4.通过name属性获取标签元素: document.getElementsByName(

js点击获取—通过JS获取图片的绝对对坐标位置

一.通过JS获取鼠标点击时图片的相对坐标位置源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap{ width:300px; height: 200px; backgro

js获取div基础元素

1.js获取div元素 clientHeight 获取对象的高度,不计算任何边距.边框.滚动条,但包括该对象的补白. clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离. clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离. clientWidth 获取对象的宽度,不计算任何边距.边框.滚动条,但包括该对象的补白. offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度. offse

js获取精确的元素宽高（普通获取高度会有误差）

当js获取元素宽高时, 并不是一个精确的数字,如果想获取真正的宽高大致方法如下 var oStyle = obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj, null); var realheight=parseFloat(oStyle.height)); 发现这个问题来自于jqGrid的固定列问题,当屏幕分辨率比例非100%的时候,dom元素的宽高可能会出现小数,这时候如果用clientHeight或者jq的ou

JS获取HTML DOM元素的8种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

原生JS获取HTML DOM元素的8种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 获取html的方法(document.documentElement) document.documentElement是专门获取htm

JS获取表单元素的value

<!-- 1.option selected属性,如果我们在下拉列表里面选择了一个option那么他的selected="true" ,如果我们想设置当前的option是选中状态的,那么我们只要设置它的selected=‘true’或者selected="selected"或者selected,这几种方式设置都可以,但是在我们使用jquery或者js获取selected这个属性的值时, 如果他当前的状态时选中的那么他的属性值就是true 2.checked

js 获取任意一个元素的任意一个样式属性的值

//谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$("dv").currentStyle.left); //获取任意一个元素的任意一个样式属性的值 //element为对象 attr为要获取那个属性 function getStyle(element,attr) { //判断浏览器是否支持这个方法 if(window.getComputed

Flutter获取点击元素的位置与大小

使用 WidgetsBindingObserver获取 class CloseTap extends StatefulWidget { @override _CloseTapTapState createState() => _CloseTapTapState(); } class _CloseTapTapState extends State<CloseTap> with WidgetsBindingObserver { void _onAfterRendering(Duration

原生js获取一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=document.getElementById('box'); // 获取元素 alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离 alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离

js获取浮动(float)元素的style.left值为空的解决办法

解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLe

微信小程序，获取点击元素的索引值index

1.需求说明点击 “加号图片” 上传图片,需要知道点击的是第几个图片,动态的修改src数组,这里图片用的 wx:for 循环出来的 2.遇到问题按照官方最新文档循环的方式,索引值是以 wx:for-index="index" 方式写的,以 parseInt(event.currentTarget.dataset.index) 方式获取索引一直是NaN,注意这里用的是currentTarget,而不是target. 这里说一下他们的区别:target指向发生事件的组件,cur

css/js禁止点击元素

css禁止点击页面元素,只需一句代码即可解决: pointer-events: none; 如果用js来控制的话那就是: $('#test').click(function(){ return false; });

js获取div相对屏幕的坐标位置

1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.getBoundingClientRect().top; return {x:x,y:y}; } 参数传js原生对象 getDivPosition($('#div0')[0]).x getDivPosition($('#div0')[0]).y

【收藏】JS获取鼠标的X,Y坐标位置

JS的方法: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript获得鼠标位置</title> </head> <body> <script> function mouseMove(ev) { Ev= ev || wind

js获取浏览器和元素对象的尺寸

1.屏幕尺寸 window.screen.height //屏幕分辨率的高 window.screen.width //屏幕分辨率的宽 window.screen.availHeight //屏幕可用工作区的高 window.screen.availWidth //屏幕可用工作区的宽 2.window对象尺寸 //获取窗口中文档显示区域的宽度及高度(兼容IE与DOM浏览器): window.innerWidth ? window.innerWidth : document.body.client

js获取屏幕以及元素宽高的方法

一.window相关网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关网页可见区域宽:document.body.clientWidth 网页可见区域高:document.

获取点击元素的id

1.onclick="dianji(this.id)" 传入id到方法里function dianji(id){ //这个就是id}2. $(document).click(function(e) { // 在页面任意位置点击而触发此事件 $(e.target).attr("id"); // e.target表示被点击的目标 })

js 获取点击元素的相对位置

热门专题