很简单,我的问题如标题:
在应用 transform:skew();
之后,有没有办法获取元素的高度?
例如如果一个元素的高度是 100px 并且顶部偏移量是 500px 预变换,在应用倾斜之后,高度实际上可能是 150px 而顶部偏移量实际上可能是 450px,但是标准的 height() 和 offset( ) jQuery 中的方法仍然报告原始值。
有解决办法吗?
提前致谢。
最佳答案
如上评论所述,高度和宽度的值未更改,因为它们基于没有样式的 DOM 元素。但是我注意到 offset() 方法从转换后的元素(Chrome 23 和 Firefox 16 OSX)返回正确的值。
为了给您一个解决方案 - 对于倾斜和旋转等 2d 变换,我对变换进行了基本数学计算,下面的函数基于元素变换矩阵返回宽度和高度值。这适用于我尝试过的所有二维变换,旋转/倾斜以及两者的组合(同样,在 Chrome 23 和 Firefox 16 OSX 上)。
function getBoundingBox(element){
// Get the transformation matrix as a string
var tm = element.css('transform');
// Transform the string to an array
var regexp = /-?\d+[\.\d]*/g;
tm = tm.match(regexp);
// Get the size of the object and calculate the bounding box
var h = element.height();
var w = element.width();
var th = Math.abs(h * tm[0]) + Math.abs(w * tm[1]);
var tw = Math.abs(h * tm[2]) + Math.abs(w * tm[3]);
return {'height':th,'width':tw}
}
More information and explanations about bounding boxes and calculations
关于javascript - 在使用 JS/jQuery 应用 'skew' 转换后,如何获取元素的高度/偏移量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13462238/