jQuery如何获取transform缩放后的宽高坐标位置

transform本身就是变形属性，不会改变元素的位置大小等，布局不发生变化，只是对元素进行变换。

所以js获取的宽高是元素未变形前的值，需要获取缩放后的宽高，可以用元素的宽高乘以缩放值。

使用Jquery 获取DIV相对浏览器的边距，也就是绝对X,Y坐标，可以用offset()：

$('div')offset()left;

示例如下：

创建Html元素

<div class="top">

本层相对浏览器的左边距为50px

<div class="inner">本层相对上一层的左边距为20px,所以相对浏览器边距为70px</div>

</div>

设置css样式

{margin:0;}

divtop{

width:500px;height:150px;

margin:50px;

background:green;

color:white;

}

divinner{

width:450px;height:100px;line-height:100px;

margin:20px;

background:red;

color:white;

}

编写jquery代码

$(function(){

$("divinner")click(function() {

alert("相对窗口左边距："+$(this)offset()left);

});

})

观察效果

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

网页可见区域宽： documentbodyclientWidth

网页可见区域高： documentbodyclientHeight

网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)

网页可见区域高： documentbodyoffsetHeight (包括边线的高)

网页正文全文宽： documentbodyscrollWidth

网页正文全文高： documentbodyscrollHeight

网页被卷去的高： documentbodyscrollTop

网页被卷去的左： documentbodyscrollLeft

网页正文部分上： windowscreenTop

网页正文部分左： windowscreenLeft

屏幕分辨率的高： windowscreenheight

屏幕分辨率的宽： windowscreenwidth

屏幕可用工作区高度： windowscreenavailHeight

屏幕可用工作区宽度： windowscreenavailWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

eventclientX 相对文档的水平座标

eventclientY 相对文档的垂直座标

eventoffsetX 相对容器的水平坐标

eventoffsetY 相对容器的垂直坐标

documentdocumentElementscrollTop

有资料可以查看。。。

var of = $("#sss")offset();

id是sss元素的坐标为 x: ofleft y: oftop

获得当前元素坐标后，用js就可以计算显示大图的位置了

以上就是关于jQuery如何获取transform缩放后的宽高坐标位置全部的内容，包括:jQuery如何获取transform缩放后的宽高坐标位置、Jquery 如何获得DIV离左边是多少像素、javascript 节点获取坐标(相对于屏幕\页面\...)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！