修改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元素，但在我正在測試的瀏覽器中似乎可以正常工作。）

在我的測試案例中，有兩個圖像，但是通常，圖像的數量是任意的，因此我正在處理帶有圖像標簽的元素數組。

我在觀察窗格中看到，width和height屬性已從javascript對象中刪除，但是html中的實際元素並未更新。 因此，我相信xItem可能是副本而不是指針。 我需要怎么做才能更改真正的DOM元素？

更新

感謝您的快速反饋。

這是更多信息。 這是我在其他帖子中提出的問題的擴展。 原始的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）； 在我給出的示例中，這似乎可行，但不適用於我的示例，因為我發現圖像標簽中存在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中可能存在其他約束，即使圖像本身已擺脫了人為約束，它們也阻止了圖像的大小變化。