修改 DOM 元素的属性

Question

这段代码缺少一些东西，但我不确定是什么。我正在用萤火虫测试它。

<script type="text/javascript">
      var xArray = document.getElementsByTagName("img"); 
      var xItem;
      for (var i=0; i<xArray.length; i++){
         xItem = xArray[i];
         xItem.removeAttribute("width");
         xItem.removeAttribute("height");
      }
</script>

它被放置在我的 html 的末尾。 （我打算将其放入 iOS 的 UIWebView 中，因此没有 head 或 body 元素，但它在我正在测试的浏览器中似乎工作正常。）

在我的测试用例中，有两个图像，但通常，图像的数量是任意的，所以我正在处理带有图像标签的元素数组。

我可以在监视窗格中看到宽度和高度属性已从 javascript 对象中删除，但 html 中的实际元素并未更新。所以我相信 xItem 可能是一个副本而不是指针。我需要做什么来改变真实的 DOM 元素？

更新

感谢您的快速反馈。

这是更多信息。这是我在另一篇文章中提出的问题的延伸。原始 html 有时会包含对于容器来说太大的图像，在本例中容器宽度仅为 300 像素。这是图像太大的情况：

<style type=\"text/css\">
    div{width:300px;}
    p{max-width:300px;}
    img {max-width:300px;}
</style>
<div style="word-wrap:break-word width:300px">
   <P CLASS="Body" STYLE="text-align: center;">
      <FONT SIZE="2">
         <IMG TITLE="INITIATION GRAPHIC" SRC="http://www.deshow.net/d/file/travel/2009-09/arizona-grand-canyon-703-12.jpg" ALT="SUNDOOR INITIATION GRAPHIC" WIDTH="100%" HEIGHT="100%">
      </FONT>
   </P>
   <P CLASS="Body">
      <FONT SIZE="3">
         <IMG TITLE="Banner" SRC="http://brown09.wikis.birmingham.k12.mi.us/file/view/Bryce_Canyon.jpg/135893343/Bryce_Canyon.jpg" ALT="Banner" WIDTH="592" HEIGHT="138">
      </FONT>
   </P> 
</div>
<script type="text/javascript">
      var xArray = document.getElementsByTagName("img"); 
      for (var i=0; i<xArray.length; i++){
         xArray[i].removeAttribute("width");
         xArray[i].removeAttribute("height");
      }
</script>

我收到的建议是将所有内容包装为一个 div，其宽度设置为我的容器宽度，然后 max-width css 属性将按比例调整我的图像大小（宽度：高度）；这似乎在我给出的示例中有效，但在我的示例中不起作用，我发现图像标签中有宽度和高度属性。

所以我正在尝试删除标签。我重新运行代码，发现我查看的 HTML 是错误的。属性正在被删除。但图像的大小仍然没有达到我的预期。我在 jsfiddle.net 上看到了这个工具（单击链接查看我的示例），我可以在其中进行实验，并且它似乎工作正常。所以当我在 Firefox 中测试它时，我仍然不知道我的努力出了什么问题。最终，我希望它能够在我的 iPad 应用程序的 UIWebView 中工作。

Answer 1

您可以直接操作它们：

for (var i=0; i<xArray.length; i++){
  xArray[i].removeAttribute("width");
  xArray[i].removeAttribute("height");
}

Answer 2

您的代码似乎非常适合我在这里找到： http://jsfiddle.net/jfriend00/UrHAw/。按下按钮，您将看到高度/宽度属性被删除，图像恢复到自然尺寸。

在您的代码中， xItem 是对 xArray[i] 的引用（虽然 JS 实际上没有指针，但其工作方式类似于指针），而不是副本，因此这不是您的问题。对 xItem 的任何操作都对 xArray[i] 指向的原始对象进行操作。

由于您拥有的通用 JS 代码工作正常，因此在您的具体情况下一定还有其他原因导致了您的问题。为了让我们提供帮助，您必须披露更多的环境以及您试图实现/解决的特定问题。实际 HTML 和实际代码的示例可能会有所帮助。例如，HTML 中可能存在其他约束，使图像无法更改大小，即使它们本身已经解除了人为约束。