如何使用JavaScript移动元素

我需要点击四个按钮之一移动div:

左、右、上、下

通过单击每个按钮，我希望div根据单击的按钮移动到

左、右、上、下


函数左（）{
$（“#rstSearch”）.position（）.left=$（“#rstSearch”）.position（）.left+10；
}
功能权限（）{
$（“#rstSearch”）.position（）.right=$（“#rstSearch”）.position（）.right+10；
}
函数top2（）{
$（“#rstSearch”）.position（）.top=$（“#rstSearch”）.position（）.top+10；
}
函数底部（）{
$（“#rstSearch”）.position（）.bottom=$（“#rstSearch”）.position（）.bottom+10；
}
#rstSearch{
背景颜色：蓝色；
宽度：50px；
高度：50px；
}

左边
正确的
顶部
底部
对css的更改很少：

#rstSearch {
  background-color: blue;
  width:50px; 
  height:50px;
  position: absolute;  // added this
}

下面是更新的jquery代码：

function left(){
  $( "#rstSearch" ).attr('style','margin-right:10px;');
}

function right(){
  $( "#rstSearch" ).attr('style','margin-left:10px;');
}

function top2(){
  $( "#rstSearch" ).attr('style','margin-bottom:10px;');        
}

function bottom(){
  $( "#rstSearch" ).attr('style','margin-top:10px;');   
}

选中jquery css修改器add position fixed to your css，而不是position


函数左（）{
$（“#rstSearch”）.css（“左”，“$（“#rstSearch”）.position（）.left-=10）；
}
功能权限（）{
$（“#rstSearch”）.css（“左”，“$（“#rstSearch”）.position（）.left+=10）；
}
函数top2（）{
$（“#rstSearch”）.css（“top”，$（“#rstSearch”）.position（）.top-=10）；
}
函数底部（）{
$（“#rstSearch”）.css（“top”，$（“#rstSearch”）.position（）.top+=10）；
}
#rstSearch{
背景颜色：蓝色；
宽度：50px；
高度：50px；
位置：固定；
}

左边
正确的
顶部
底部
给你一个解决方案


函数左（）{
$（“#rstSearch”）.css（'左'，$（“#rstSearch”）.position（）.left-10）；
}
功能权限（）{
$（“#rstSearch”）.css（'左'，$（“#rstSearch”）.position（）.left+10）；
}
函数top2（）{
$（“#rstSearch”）.css（'top'，$（“#rstSearch”）.position（）.top-10）；
}
函数底部（）{
$（“#rstSearch”）.css（'top'，$（“#rstSearch”）.position（）.top+10）；
}
#rstSearch{
背景颜色：蓝色；
宽度：50px；
高度：50px；
位置：绝对位置；
}

左边
正确的
顶部
底部
一种不同的方法，没有jQuery，只有两个函数用于x轴和y轴上的移动


var rstSearch=document.getElementById（'rstSearch'）；
函数水平（值）{
rstSearch.style.left=（parseInt（rstSearch.style.left）| | 0）+值+'px'；
}
函数垂直（值）{
rstSearch.style.top=（parseInt（rstSearch.style.top）| | 0）+值+'px'；
}
#rstSearch{
背景颜色：蓝色；
宽度：50px；
高度：50px；
位置：相对位置；
}
左
正确的
顶部
底部
这是您想要的吗？这只会移动它一次，让它读取当前的内容，然后移动10，也许可以？还是我错了？你是对的。另外，添加
边距底部
不会使元素向上移动。。。