使用 javascript 动态更改 div 标签的 position

Question

I have an ASP button in a div to the right side of a page. I want to change the position to the left in the same row dynamically with onchange event of a dropdown.

I did this way:

document.getElementById('divButtonGo').style.Paddingleft="80px"

How do I do this with Javascript?

Answer 1

The example you have provided already is javascript. If you want to change what triggers the code to run, change where you place it.

from an onchange event, into a function in a script tag that is called by something else.

example

<input type="button" onclick="movediv()" />
<script>
    function movediv(){
        document.getElementById('divButtonGo').style.Paddingleft="80px"
    }
</script>

Answer 2

There's several things wrong here. In order of increasing importance:

1. You're missing the closing slash from your i tag.
2. I don't see a "divButtonGo" in your html. If it's not there at all, obviously it won't work. If it is, include it in your code snippet.
3. I'm pretty sure to set the style you're going to need elem.style.paddingLeft , not elem.style.Paddingleft
4. Your script isn't wrapped inside <script> tags. All Javascript has to be wrapped in these tags, and , in order for that code to operate sucessfully, it's going to have to be placed after the "divButtonGo", or you'll have to wire up an onload event, like window.onload = function() { /* Bombs away; */ }; window.onload = function() { /* Bombs away; */ };

Your final result should look something like...

<div id="divButtonGo">
My Awesome Content
</div>
<script type="text/javascript">
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
</script>

Also, to note, padding wont' exactly change the position of the div , only the position of the content inside. If you want to change the position of the div , use margin-left (in JS, element.style.marginLeft , i believe)

EDIT:

I forgot you wanted it in the onchange event of a dropdown; so you'd do somethign like:

var dropdown = document.getElementById("MyDropDown");
dropdown.onchange = function() {
var el = document.getElementById("divButtonGo");
el.style.paddingLeft = "30px";
};