计算样式是否给出了可能与实际值不同的计算值?

时间:2016-06-15 08:11:21

标签: javascript jquery html css

我在尝试

var oldleft = mydiv.style.left; 
mydiv.style.left = "-100%"; 
newleft = parseInt(window.getComputedStyle(mydiv,null).getPropertyValue("left"));

和jquery版本:

var oldleft = mydiv.style.left; 
mydiv.style.left = "-100%"; 
newleft = parseInt($(mydiv).css("left"));
在div上。 mydiv也使用css3动画。在div移至newleft后,我认为left会获得-100%属性的像素值。我观察到的是newleft具有与oldleft相同的值。所以,

  

计算样式是否给出了可能与实际内联样式值不同的计算值?

我想要left mydiv属性的值,以{}}移动到-100%后的像素值。我怎么得到这个?

编辑:我发布了复制问题的简约示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">

    .panel-group {
        width: 200px;
        height: 200px;
        background-color: gray;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.5s linear;
    }

    </style>

    <script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>
</head>
<body>

    <div class="panel-group">
        Hello
    </div>


    <script type="text/javascript">

    var center = document.getElementsByClassName("panel-group")[0];
    var initialleft = parseInt($(".panel-group").css("left"));
    center.style.left = initialleft;
    var intpos, increment = 0, lastpos, direction, oldx = 0;
    lastpos = initialleft;
    var pressed = 0;



    center.addEventListener("touchend", function(){

        pressed = 0;
        if( parseInt(increment) > 100 ) {

            center.style.left = (screen.width - 10) + "px";
            lastpos = parseInt(center.style.left);
        }
        else if( (parseInt(increment) < -100) ) {
            center.style.left = initialleft + "px";
            lastpos = parseInt(center.style.left);
        }
        else{
            center.style.left = lastpos + "px";
        }


    });
    center.addEventListener("touchstart", function(down) {

        intpos = down.touches[0].screenX;
        pressed = 1;

    });
    center.addEventListener( "touchmove", function(Dmove) {
            if(pressed == 1) {

            increment = (Dmove.touches[0].screenX - intpos);
            center.style.left = (lastpos + increment) + "px";
        }

        /*
        if (Dmove.pageX < oldx) {
            direction = "left";
        } else if (Dmove.pageX > oldx) {
            direction = "right";
        }           
        oldx = Dmove.pageX; 

        */      
    });

    $(window).on("orientationchange",function(){

        alert("screen is" + screen.width);
        center.style.left = "0px";
        initialleft = parseInt(window.getComputedStyle(center,null).getPropertyValue("left"));
        lastpos = initialleft;
        alert(lastpos);
    });

    /* Swiping menu finishes here */


    </script>

</body>
</html>

在google chrome中将上述代码打开为html文件。然后在开发者工具中使用移动横向模式。单击灰色框并向右滑动。现在从横向模式更改为potrait模式。根据以下代码段

$(window).on("orientationchange",function(){

            alert("screen is" + screen.width);
            center.style.left = "0px";
            initialleft = parseInt(window.getComputedStyle(center,null).getPropertyValue("left"));
            lastpos = initialleft;
            alert(lastpos);
        });

initialleft应为0,但事实并非如此。您可以在控制台窗口中检查initialleft的值。

0 个答案:

没有答案