1

我可能这样做是错误的，我首先学习了 Jquery 和简单的东西。参加 javascript 学习 DOM0 和 DOM1 的课程，但无法让它发挥作用。

<!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。每次调用时，您的函数都会转到 DOM document.getElementsByTagName('img')。由于它在 for 循环中，因此可能很多。当然，在您的示例中只有两个 img 标签，但请考虑将此脚本应用于真实页面。

触摸 DOM 一次并将结果缓存在变量中通常是个好主意，如下所示：

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

这样，您只需访问 DOM 一次，然后使用变量images（作用域为您的函数）。

此外，您可以（应该）将它们放在 HTML 文档中的相同脚本标记中（因为它们是内联脚本）。而且由于您只调用一个函数，并且在 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 回答