Javascript DOM CSS Style display Property compare inline, block and none

Introduction

Difference between "inline", "block" and "none":

View in separate window 

<!DOCTYPE html>
<html>
<body>

<p>Select a display type in the list below to change <span id="mySpan" style="color:blue;">this span element's</span> display type.</p>

<select onchange="myFunction(this);" size="3">
  <option>block
  <option>inline
  <option>none
</select>/*from   w w w.  j a  v a 2  s  .  co m*/

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

</body>
</html>



PreviousNext

Related