JS和CSS的初步入門（JS可以取得所有p的內容並顯示）

findumars發表於2013-07-01
JSCSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Shopping list</title>
    <style type="text/css">
p {  /* 對所有p進行說明 */
  color: yellow; 
  font-family: "arial", sans-serif;
  font-size: 1.2em;
}
body {
  color: white; /* 沒有專門說明的話，body的所有文字都是白色 */
  background-color: black; /* 全屏黑色背景 */
}
#purchases {  /* 對某一個id進行說明 */
  border: 1px solid white; /* 定製邊框 */
  background-color: #333;
  color: #ccc;
  padding: 1em;
}
#purchases li { /* 對某一個id的下屬進行說明 */
  font-weight: bold;
}

    </style>
  </head>
  <body>
    <h1>What to buy</h1>
    <h1>What to buy</h1>
    <p title1="a gentle reminder">Don't forget to buy this stuff.</p>
    <p>This is just a test</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li>Cheese</li>
      <li>Milk</li>
    </ul>
    <script type="text/JavaScript">
    var paras = document.getElementsByTagName("p");
    for (var i=0; i< paras.length; i++) {
      var title_text = paras[i].getAttribute("title1");
      if (title_text != null) {
        alert(title_text);
      }
    }
    </script>
  </body>
</html>

 

相關文章