修改DOM元素的属性

Question

Something is missing from this code, but I'm not sure what. I am testing it with firebug.

<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>

This is placed at the end of my html. (I intend to put this into a UIWebView with iOS, so there is no head or body element, but it appears to be working okay in the browser I am testing with.)

In my test case, there are two images, but generally, the number of images is arbitrary, so I am processing an array of elements with image tag.

I can see in the watch pane that the width and height attributes are removed from the javascript objects, but the actual elements in the html are not being updated. So I believe that xItem is probably a copy and not a pointer. What do I need to do to change the real DOM element?

UPDATE

Thanks for the quick feedback.

Here is some more info. This is an extension of a question I had in another post . The original html occasionally has images that are too large for the container, which is only 300px wide, in this case. Here is a case where the images are too large:

<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>

The advice I received was to wrap everything is a div with a width set to my container width, and then the max-width css attributes would resize my images proportionally (width:height); That appeared to work in the examples I was given, but didn't work with mine, where I found there were width and height attributes in the image tags.

So I am trying to remove the tags. I reran the code, and saw that I was looking at the HTML wrong. The attributes are being removed. But the images still are not being sized like I am expecting. I was shown this tool at jsfiddle.net (click the link to see my example), where I can experiment with this, and it seems to be working right. So I am still lost as to what is wrong with my effort when I test it in firefox. Ultimately, I want it to work inside a UIWebView in my iPad app.

Answer 1

You can manipulate them directly:

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

Answer 2

Your code seems to work perfectly find for me here: http://jsfiddle.net/jfriend00/UrHAw/ . Press the button and you will see the height/width attributes are removed and the images return to their natural size.

In your code xItem is a reference to xArray[i] (works like a pointer though JS doesn't actually have pointers), not a copy so that is not your issue. Any operation on xItem operates on the original object that xArray[i] points to.

Since the general JS code you have works fine, there must be something else in your specific case that is causing your issue. For us to help, you will have to disclose more of the environment and the particular problem you are trying to implement/solve. Samples of the actual HTML and the actual code might help. For example, there could be other constraints in the HTML that are keeping the images from changing size even though they themselves have been relieved of artificial constraint.