Change position in JavaScript

Description

The following code shows how to change position.

Example


<!DOCTYPE html>
<html>
<body>
<div id="div1">
This is a DIV element. Click me to see the change.
</div><!--from  w  w w  .j a  va2  s .c o m-->
<script type="text/javascript">
var div = document.getElementById("div1");

div.style.backgroundColor="#00f";
div.style.width="500px";
div.style.color="#fff";
div.style.height="200px";
div.style.paddingLeft="50px";
div.style.paddingTop="50px";
div.style.fontFamily="Verdana";
div.style.fontSize="2em";
div.style.border="3px dashed #ff0";
div.style.position="absolute";
div.style.left="20px";
div.style.top="10px";
div.style.textDecoration="underline";

</script>
</body>
</html>

Click to view the demo

The code above generates the following result.

Home »
  Javascript Tutorial »
    Style »
      Layout

Javascript Tutorial Layout
Add padding to a HTML element in JavaScript
Change height in JavaScript
Change left in JavaScript
Change padding bottom in JavaScript
Change padding left in JavaScript
Change padding right in JavaScript
Change padding top in JavaScript

Change position in JavaScript

Change right in JavaScript
Change top in JavaScript
Change width in JavaScript
Set div position in page scroll action in J...