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中，因此没有头部或主体元素，但它在我正在测试的浏览器中似乎正常工作。）

在我的测试用例中，有两个图像，但一般来说，图像的数量是任意的，所以我正在处理带有图像标记的元素数组。

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

更新

感谢您的快速反馈。

以下是一些更多信息。这是我在another post中遇到的问题的扩展。原始的html偶尔会有容器的图像太大，在这种情况下只有300px宽。这是图像太大的情况：

<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属性将按比例调整我的图像大小（width：height）;这似乎适用于我给出的示例，但不适用于我的，我发现图像标签中有宽度和高度属性。

所以我想删除标签。我重新编写代码，发现我在查看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中可能存在其他约束，即使它们本身已被解除人为约束，也会使图像不会改变大小。

修改DOM元素的属性

更新

2 个答案: