1

私はおそらくこれを間違った方法で行いました。最初にJqueryを学び、簡単なことを学びました。DOM0とDOM1を学習するJavaScriptのコースを受講しているが、これを機能させることができない。

<!DOCTYPE html>

<html lang="en">

<head>
<script type="text/javascript">
     function addBorder(){
          for var i=0; i<document.getElementsByTagName('img').length; i++) {
               document.getElementsByTagName('img')[i].style.border="3px solid red");
          }
     }
</script>
<script type="text/javascript">
     window.onload=addBorder;
</script>
</head>

<body>
<img src="image1.jpg" />
<img src="image2.jpg" />

</body>

</html>

すばやく入力します。タイプミスがある場合は無視します。エラーやアクティビティは発生しません。

DOM0 document.images ...、window.onload = function（）{...など、さまざまな方法で試してみました。

常に何もありません。スクリプトの後に画像が読み込まれるという基本的な考え方を理解してください。本文に配置すると正常に機能します。しかし、なぜそれがwindow.onload =内で機能しないのでしょうか？

4

2 に答える 2

1

Ryanが指摘したように、ソースコードにタイプミスがあります（との間にスペースが必要ですvar）i。

これは初心者クラスですが、最初から良い習慣を身に付けたいと思うかもしれません。一般に、DOMの確認は、可能な限りまれに行う必要があります。関数は、を呼び出すたびdocument.getElementsByTagName('img')にDOMに移動します。それはforループにあるので、それはたくさんあるかもしれません。確かに、あなたの例ではimgタグは2つしかありませんが、このスクリプトを実際のページに適用することを検討してください。

通常、DOMに一度触れて、次のように結果を変数にキャッシュすることをお勧めします。

function addBorder() {
      var images = document.getElementsByTagName('img');
      for (var i=0; i < images.length; i++) {
           images[i].style.border = "3px solid red";
      }
}

このように、DOMを1回だけヒットしてから、変数images（関数のスコープ）を使用します。

また、これらの両方をHTMLドキュメントの同じスクリプトタグに配置することもできます（インラインスクリプトであるため）。また、呼び出している関数は1つだけであり、window.onloadで呼び出しているので、次のように、関数を単純化して、すぐに呼び出される関数式（さらに読む）でラップできます。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">

    (function () {
          var images = document.getElementsByTagName('img');
          for (var i=0; i < images.length; i++) {
               images[i].style.border = "3px solid red";
          }
    })();

</script>
</head>

<body>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
</body>

</html>
于 2013-03-23T04:14:31.210 に答える
0

コードの構文を適切に修正するとすぐに、画像に赤い境界線が表示されました。

 function addBorder() {
      for (var i=0; i < document.getElementsByTagName('img').length; i++) {
           document.getElementsByTagName('img')[i].style.border = "3px solid red";
      }
 }
于 2013-03-23T04:03:24.050 に答える