这是我目前用于该函数的代码,我过去使用键代码移动img
但是我使用了一个函数来移动它,代码看起来应该是工作可能只是一个愚蠢的错误:
<!DOCTYPE html>
<html>
<head>
<title>Return To Alnerwick</title>
<style>
body
{
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/e8/d6/fc/e8d6fc15671a05eeaf592f85c6dbb2db.jpg");
background-size: 1500px 1000px;
background-repeat: no-repeat;
}
img
{
position:absolute;
TOP:650px;
LEFT:750px;
width:100px;
height:100px
}
</style>
<script>
function move() {
var element = document.getElementById("char");
element.style.left = parseInt(element.style.left) - 90 + 'px';
}
</script>
</head>
<body>
<img id="char"src="/New Piskel (5).gif">
<button onclick="move();">move</button>
</body>
</html>
答案 0 :(得分:2)
这是因为您使用的是样式表。使用样式表时,您已获得计算出的样式:
function move() {
var element = document.getElementById("char");
var style = window.getComputedStyle(element);
console.log("Current value: " + style.left);
element.style.left = (parseInt(style.left) - 90) + 'px';
}
看一个工作小提琴:https://jsfiddle.net/vgb7tc03/1/
另请getComputedStyle
参考:https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
答案 1 :(得分:0)
在move
功能中,您引用了element.style.left
。这是元素的内联样式属性。内联样式属性根本没有在您的标记中定义。
您正在css中定义LEFT
属性(不是内联)。您需要做的是从函数中引用LEFT
css属性,或者在元素中而不是在CSS中内联left
属性。
答案 2 :(得分:0)
你的问题是element.style.left不会返回它的位置。有几种解决方案:
1)你知道你的图像已经从左边750px了所以你可以去
var img_left=750;
在脚本代码的开头,然后转到
img_left=img_left-90;
element.style.left = img_left + "px";
在你的功能中。
2)如果你想得到元素的位置,你会去
element.getBoundingClientRect().left;
而不是element.style.left所以整行都是
element.style.left=(element.getBoundingClientRect().left-90)+"px";