html - How to move a div from left to right using javascript

I have div named movingImage that I want to move to the right 50px every time I click a button.

Here's my javascript:

function moving_Image() {
    document.getElementById("movingImage").style.right = "50px";
}

And html:

<h1 id="movingImage"> __________ </h1>
<input type="button" value="click me" onclick="moving_Image()">

I have div named movingImage that I want to move to the right 50px every time I click a button.

Here's my javascript:

function moving_Image() {
    document.getElementById("movingImage").style.right = "50px";
}

And html:

<h1 id="movingImage"> __________ </h1>
<input type="button" value="click me" onclick="moving_Image()">

Share Improve this question edited Jan 12, 2016 at 16:06 CoderPi 13.2k4 gold badges38 silver badges64 bronze badges asked Jan 12, 2016 at 15:08 Ayush Mishra 2231 gold badge3 silver badges4 bronze badges

2 Why do you guys downvote? He does not know how to do it, but he tryed.. – CoderPi Commented Jan 12, 2016 at 15:10
1 @CodeiSir He should post the css code that associated with this div. Otherwise there is no absolute solution for his issue. – Lewis Commented Jan 12, 2016 at 15:13
1 Won't += '50px' just concatenate strings together? – Andy Commented Jan 12, 2016 at 15:14
1 @CodeiSir Then how can he know that his 0px width div moves to the right? – Lewis Commented Jan 12, 2016 at 15:15
1 @Tresdin div? what div? His div is called h1 and it has content – CoderPi Commented Jan 12, 2016 at 15:17

| Show 3 more comments

4 Answers 4

Sorted by: Reset to default 9

The element you want to move, needs to have the CSS property position: relative;:

I also changed .style.left to .style.right, you will see why:

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()">

If you don't understand something else, please feel free to ask in the comments.

use this code instead:

<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>

I think CodeiSir has it covered, but I wanted to share a few notes that I made playing around with the code about some general JavaScripty things, as well as a couple of new things I learned today.

1) Separate your JS from your HTML.

This

<input type="button" value="click me" onclick="moving_Image()">

would become

<button>Click me</button>

and

document.querySelector('button').onclick = moving_Image;

2) There's an element called offsetLeft (also offsetRight, obvs) which is a read-only attribute that shows by how much the upper left corner of the current element is offset to the left. So we can, for example, write:

div.style.left = (div.offsetLeft + amount) + 'px';

3) It might be fun to have a range of buttons that move the element different amounts, perhaps by adding data attributes to the buttons:

<button data-amount="50">by 50</button>

We can then process that amount using the dataset attribute in the function.

function movingImage(e) {
  var amount = +e.target.dataset.amount;
  div.style.left = (div.offsetLeft + amount) + 'px';
}

The code in full. Note I'm also passing in the div element with the click event.

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>

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);
});

DEMO

This is My Version to move a div left to right using javascript:

<!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>

src: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_left https://www.w3schools.com/jsref/jsref_if.asp

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How to move a div from left to right using javascript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)