JS -day011を学びます

今日は、に沿って効果JSの一部をノックして

1 <！DOCTYPE HTML>
 2 <HTML>
 3 <ヘッド>
 4      <タイトル>关闭小广告</タイトル>
 5      <スタイルタイプ= "テキスト/ CSS">
 6          ■は{
 7              マージン：0 自動。
8              幅：258px;
9          }
 10          #icon {
 11              位置：絶対。
12              幅：258px;
13          }
 14          ＃閉じる{
 15              位置：相対。
16              トップ：0 ;
17              幅：40ピクセル;
18          }
 19      </スタイル>
 20 </ HEAD>
 21 <body>
 22 <DIV CLASS = "ボックス">
 23      <IMG ID = "アイコン" SRC = "../ IMG / IMG-02.jpg"幅=」 258 ">
 24      <IMG ID ="クローズ"SRC =" ../ IMG / IMG-close.jpg」幅= "40">
 25 </ div>
 26  
27 > <スクリプトタイプ= "テキスト/ javascriptの"
 28      ウィンドウ.onload = 関数（AB）{
 29          // 1获取关闭标签
30          VAR近い=のdocument.getElementById（ "クローズ" ）。
31で 
32          // モニターをクリックします。2. 
33がある          close.onclick =機能（）{
 34              はconsole.log（「クローズ使う」）;
 35              // 削除するために彼の兄弟の写真を入れて
36に             この.parentNode.removeを、
 37              // 第二の方法は、より安全であると思わ
38              本。 = parentNode.style.display "NONE" ;
 39          }
 40      }
 41である </スクリプト>
 42である </ BODY>
 43である </ HTML>

1 <！DOCTYPE HTML>
 2 <HTML>
 3 <ヘッド>
 4      <タイトル>图片相册</タイトル>
 5      <スタイルタイプ= "テキスト/ CSS">
 6          * {マージン：0;パディング：0 ;}
 7          #box {マージン：0 自動;幅：500pxなど;高さ：500pxなど;}
 8          の#text {マージン：0 ;色：青;}
 9          #big_img {幅：300ピクセル;}
 10          #pic李{ フロート：左; margin- 右： 10pxの;高さ：200pxの;}
 11          #pic IMG {高さ：80px;}
 12      </スタイル>
 13 </ HEAD>
 14 <
ボディ>15 <DIV ID = "ボックス">
 16      <！ -説明を拡大- >
 17      <P IDは= "テキスト">タンポポ</ P>
 18である      <！ -ビッグ・ショー- >
 19。      <IMG ID = "big_img" SRC =」../ IMG / IMG-02.jpg ">
 20である      <！ -サムネイル一覧- >
 21である      <UL ID = "PIC">
 22である          <LI>
 23である              <HREF =" .. /img/img-02.jpg "タイトル="風景">
 24                  <IMG SRC =" ../ IMG / IMG-02.jpg「>
 25              </a>の
 26である          </ LI>
 27          <LI>
 28              <
href = "../ IMG / IMG-03.jpg"タイトル= "花"> 29                  <IMG SRC = "../ IMG / IMG-03.jpg">
30              </a>の
 31          </ LI>
 32      </ UL>
 33 </ div>
 34  
35 <スクリプトタイプ= "テキスト/ javascriptの">
 36      window.onload = 関数（AB）{
 37          // 1获取的需要标签
38          VaRのテキスト=のdocument.getElementById（ "テキスト" ）。
39          VAR big_img =のdocument.getElementById（ "big_img" ）。
40          VARの PIC =のdocument.getElementById（ "PIC" ）。
41の         VaRの連想リスト= pic.getElementsByTagName（ "A" ）。
 
         
         用（VAR i = 0; I <aLists.length; iは++ ）{
 45              VaRの Aは= 連想リストを[I]。
46              a.onclick = 関数（AB1）{
 47                  text.innerText = この.TITLE。
48                  big_img.setAttribute（ "SRC"、この.HREF）。
49                  リターン はfalse ;
50              }
 51          }
 52      }
 53 </スクリプト>
 54 </ BODY>
 55 </ HTML>

おすすめ