Javascript DOM CSS Style captionSide Property get

Introduction

Return the table caption: 

alert(document.getElementById("myCap").style.captionSide);

Click the button to get the position of the table caption.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  margin: 10px;
}
</style>//from  www  .j ava2  s  .c om
</head>
<body>
<button onclick="myFunction()">Test</button>

<table>
  <caption id="myCap" style="caption-side:bottom;">Table 1.1 Customers</caption>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>CSS</td>
    <td>A</td>
    <td>G</td>
  </tr>
  <tr>
    <td>HTML</td>
    <td>B</td>
    <td>S</td>
  </tr>
  <tr>
    <td>Java</td>
    <td>C</td>
    <td>M</td>
  </tr>
</table>

<p id="demo"></p>


<script>
function myFunction() {
  document.getElementById("demo").innerHTML = document.getElementById("myCap").style.captionSide;
}
</script>

</body>
</html>



PreviousNext

Related