網頁

▼

HTML5練習: selector API


程式碼上傳網站。
http://5b21.comyr.com/HTML-Pro/SelectorAPI.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Query Selector Demo
    </title>
    <style type="text/css">td { border-style: solid; border-width: 1px; font-size: 300%; } td:hover { background-color: cyan; } #hoverResult { color: green; font-size: 200%; } 
    </style>
  </head>
  <body>
    <section>
      <!-- create a table with a 3 by 3 cell display -->
      <table>
        <tr><td>A1</td> <td>A2</td> <td>A3</td>
        </tr>
        <tr><td>B1</td> <td>B2</td> <td>B3</td>
        </tr>
        <tr><td>C1</td> <td>C2</td> <td>C3</td>
        </tr>
      </table>
      <div>Focus the button, hover over the table cells, and hit Enter to identify them using querySelector('td:hover').
      </div>
      <button type="button" id="findHover" autofocus>Find 'td:hover' target
      </button>
      <div id="hoverResult">
      </div>
<script type="text/javascript">
document.getElementById("findHover").onclick = function() {
// find the table cell currently hovered in the page
var hovered = document.querySelector("td:hover");
if (hovered)
document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
}
</script>
    </section>
  </body>
</html>

at