计算出缩放和旋转元素的原始高度答案

【问题标题】：Working out the original height of scaled and rotated element计算出缩放和旋转元素的原始高度
【发布时间】：2016-08-16 04:39:37
【问题描述】：

在下面的示例中，我有五个部分和一个控制台日志，它打印出当前滚动位置、部分的高度以及该部分在文档中的位置。当没有对这些部分进行操作时，在我的屏幕上，结果如下。

Current Scroll Position: 0, Position Of Section: 10, Height Of Section: 196.796875
Current Scroll Position: 0, Position Of Section: 216.796875, Height Of Section: 196.796875
Current Scroll Position: 0, Position Of Section: 423.59375, Height Of Section: 196.796875
Current Scroll Position: 0, Position Of Section: 630.390625, Height Of Section: 196.796875
Current Scroll Position: 0, Position Of Section: 837.1875, Height Of Section: 196.796875

但是，在对部分进行操作后，读取的结果。

Current Scroll Position: 0, Position Of Section: 10, Height Of Section: 225.51136779785156
Current Scroll Position: 0, Position Of Section: 216.85635375976562, Height Of Section: 225.51138305664062
Current Scroll Position: 0, Position Of Section: 423.59375, Height Of Section: 225.5113525390625
Current Scroll Position: 0, Position Of Section: 630.4501342773438, Height Of Section: 225.5113525390625
Current Scroll Position: 0, Position Of Section: 837.1875, Height Of Section: 225.5113525390625

我的问题：有没有办法在元素被操作之前，元素被操作之后获取元素的高度？

查看此JSFiddle 了解未操作的部分，查看此JSFiddle 了解已操作的部分。

【问题讨论】：

Dan，你认为你的新高度是从左侧最高点到右侧最低点的距离还是每个矩形？
@JoelHernandez 我认为高度是未旋转元素的上边缘到下边缘，但我不知道如何告诉代码

标签： javascript jquery html css gsap

【解决方案1】：

Dan，您可以尝试为矩形的每个高度设置一个 cookie：

在 JS 中设置 Cookie：

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

然后，您可以检索旋转后的高度值：

在 JS 中获取 Cookie：

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

这是一种方法。希望这会有所帮助！

【讨论】：