我在尝试
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"));
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
的值。