使用JavaScript增量地改变元素的位置

Changing an element's position incrementally using JavaScript

本文关键字：元素 位置 改变 JavaScript 使用      更新时间：2023-09-26

我刚刚开始接触Javascript，从"深入项目"的方法开始。我现在的目标是简单地让div元素向左移动10px，增量，每次鼠标悬停。以下是目前为止的内容:

HTML 

<div id="test"></div>
CSS 

div {
    position:relative;
    width:30%;
    border:1px solid blue;
    height:50px;
}
JavaScript 

document.getElementById("test").onmouseover = function() {mouseOver()};
function mouseOver() {
    document.getElementById("test").style.left = "10px";
}

JSFiddle

我明白为什么这不起作用-然而，我不确定如何让它工作，我不确定我应该使用什么搜索查询。

感谢您的宝贵时间。

你错过的是，你没有增加元素的left属性的值

试试这个https://jsfiddle.net/mdb6yt4z/1/

var left = 10;
document.getElementById("test").onmouseover = function() {mouseOver()};
function mouseOver() {
    console.log(document.getElementById("test").style.left);
    document.getElementById("test").style.left = left+"px";
    left+=10;
}

每个函数调用都应该递增

document.getElementById("test").onmouseover = function() {mouseOver()};
var increment = 10;
function mouseOver() {
    document.getElementById("test").style.left = increment + "px";
    increment += 10;
    alert(increment);
}
相关文章：