[英]How to move a div from left to right using javascript
我有一个名为movingImage div ，每次单击按钮时我都想向右移动50px。
这是我的javascript：
function moving_Image() {
document.getElementById("movingImage").style.right = "50px";
}
和 html：
<h1 id="movingImage"> __________ </h1>
<input type="button" value="click me" onclick="moving_Image()">
要移动的元素，需要有CSS属性position: relative; ：
我也将.style.left改为.style.right ，你会明白为什么：
var imageOffset = 0 function moving_Image() { imageOffset += 50 document.getElementById("movingImage").style.left = imageOffset + "px"; }
#movingImage { position: relative; }
<h1 id="movingImage">__________</h1> <input type="button" value="click me" onclick="moving_Image()">
如果您还有什么不明白的，请随时在评论中提问。
改用此代码：
<body>
<script>
function movingImage(){
var movingImage = document.getElementById("movingImage").style.left;
movingImage.style.left = movingImage.substring(0,MovingImage.length-1) + 50.toString() + "px";
}
</script>
<h1 id="movingImage" style="position: absolute; left: 0px;">Move Image!</h1>
<input type="button" value="Move, Move Image!" onclick="movingImage()">
</body>
我认为 CodeiSir 已经涵盖了它，但我想分享一些我在玩代码时所做的一些关于一些通用 JavaScript 事物的笔记，以及我今天学到的一些新东西。
1) 将您的 JS 与您的 HTML 分开。
这个
<input type="button" value="click me" onclick="moving_Image()">
会成为
<button>Click me</button>
和
document.querySelector('button').onclick = moving_Image;
2) 有一个名为offsetLeft （也称为offsetRight ， offsetRight ）的元素，它是一个只读属性，显示当前元素的左上角向左偏移了多少。 例如，我们可以这样写：
div.style.left = (div.offsetLeft + amount) + 'px';
3) 使用一系列按钮来移动元素不同的量可能会很有趣，也许是通过向按钮添加数据属性：
<button data-amount="50">by 50</button>
然后我们可以使用函数中的dataset属性处理该数量。
function movingImage(e) {
var amount = +e.target.dataset.amount;
div.style.left = (div.offsetLeft + amount) + 'px';
}
完整的代码。 注意我还通过click事件传入 div 元素。
HTML
<div id="movingImage"> __________ </div>
<button data-amount="5">by 5</button>
<button data-amount="20">by 20</button>
<button data-amount="50">by 50</button>
JS
function movingImage(el, e) {
// adding a preceding + coerces the string to an integer
var amount = +e.target.dataset.amount;
el.style.left = (el.offsetLeft + amount) + 'px';
}
var div = document.getElementById("movingImage");
var buttons = document.querySelectorAll('button');
// [].slice.call basically makes the nodelist an array
// so that you can use the native array functions on it.
[].slice.call(buttons).forEach(function (button) {
// here were just binding the div element to the click
// event. We could just have easily written
// button.onclick = movingImage;
// and then referred to div instead of el in the function
button.onclick = movingImage.bind(this, div);
});
这是我使用 javascript 从左到右移动 div 的版本：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>
Click the "Try it" button to position the DIV element 100 pixels from the right edge:
</p>
<p>
<strong>Note:</strong> If the position property is set to "static", the right property has no effect.
</p>
<button onclick="myFunction()">Try it</button>
<div id="movingImage">
This is My Div!!
</div>
<script>
function myFunction() {
let movingImage = document.getElementById("movingImage");
if (movingImage.style.right = "100px") {
movingImage.style.right = "0px";
} else {
movingImage.style.right = "100px";
}
}
</script>
</body>
</html>
源代码： https : //www.w3schools.com/jsref/tryit.asp ? filename = tryjsref_style_left https://www.w3schools.com/jsref/jsref_if.asp
如何使用javascript从左到右和从右到左移动列表
[英]How can i move the list from left to right and right to left using javascript
如何使用“产品”的位置从左或右，上或下移动产品div
[英]How do I move a product div from left or right and up or down using And Store its position
如何使用JavaScript从左向右移动元素，后退并重复？
[英]How to move element from left to right, turn back and repeat, using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.