我想检索我已经应用了
CSS3转换的div的大小.
-webkit-transform: scale3d(0.3,0.3,1);
所以,我有效地将元素的原始尺寸的30%.但是,当我查询元素宽度/高度时,它会报告在应用变换之前元素的大小.
我明白这实际上是正确的行为,并且该元素实际上并没有改变大小,但是它的内容.但是,和我在这里询问的原因,如果我右键单击该元素,并从弹出菜单中选择“检查元素”(我刚刚在Mac上使用Safari),该元素将被突出显示渲染的大小在附加到元素的浏览器工具提示中呈现.
因此,这表明浏览器“知道”渲染的大小,但是我还没有找到一种访问这些信息的方法.有人可以帮我吗
解决方法
哇,这比我预期的要困难.我很惊讶,因为没有一个简单的方法.
这是JS:
$('div').each(function() { var matrix = window.getComputedStyle(this).webkitTransform,data; if (matrix != 'none') { data = matrix.split('(')[1].split(')')[0].split(','); } else { data = [1,null,1]; } $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]); });
关键是getComputedStyle()函数,它很有意义地将矩阵返回为一个字符串,必须在矩阵有用之前将其解析为数组.然而,它包含渲染的变换比率,可以乘以CSS维度来获取渲染的大小.
参考:CSS Tricks
原文地址:https://www.jb51.cc/js/153906.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。