Javascript DOM CSS Style position Property for all position types

Introduction

Using different position types:

View in separate window

<!DOCTYPE html>
<html>
<body>

<p>Select a position in the list below to change the div's position.</p>

<div id="myDiv" style="top:50px;left:100px;">I am a div element.</div>

<select onchange="myFunction(this);" size="5">
  <option>absolute
  <option>fixed
  <option>static
  <option>relative
  <option>sticky
</select>//from   w ww.  ja  va2s  .c o  m

<script>
function myFunction(x) {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}
</script>

</body>
</html>



PreviousNext

Related