Изменение атрибута элемента DOM - PullRequest
1 голос
/ 21 октября 2011

Чего-то не хватает в этом коде, но я не уверен, что.Я тестирую его с помощью 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>

Это помещено в конце моего HTML.(Я намереваюсь поместить это в UIWebView с iOS, чтобы в нем не было элемента head или body, но в браузере, с которым я тестирую, все работает нормально.)

В моем тестовом примере естьдва изображения, но, как правило, количество изображений является произвольным, поэтому я обрабатываю массив элементов с тегом изображения.

На панели просмотра я вижу, что атрибуты width и height удалены из объектов 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.В конечном счете, я хочу, чтобы он работал внутри UIWebView в моем приложении для iPad.

Ответы [ 2 ]

0 голосов
/ 21 октября 2011

Ваш код, кажется, отлично работает, найдите для меня здесь: http://jsfiddle.net/jfriend00/UrHAw/. Нажмите кнопку, и вы увидите, что атрибуты высоты / ширины удалены и изображения возвращаются к своему естественному размеру.

В вашем коде xItem - это ссылка на xArray [i] (работает как указатель, хотя JS на самом деле не имеет указателей), а не копия, так что это не ваша проблема.Любая операция в xItem работает с исходным объектом, на который указывает xArray [i].

Поскольку у вас есть общий код JS, который работает нормально, в вашем конкретном случае должно быть что-то другое, что вызывает вашу проблему.Чтобы мы могли вам помочь, вам нужно будет больше рассказать об окружающей среде и конкретной проблеме, которую вы пытаетесь решить / решить.Примеры реального HTML и фактического кода могут помочь.Например, в HTML могут быть другие ограничения, которые не позволяют изображениям изменять размер, даже если сами они были освобождены от искусственного ограничения.

0 голосов
/ 21 октября 2011

Вы можете управлять ими напрямую:

for (var i=0; i<xArray.length; i++){
  xArray[i].removeAttribute("width");
  xArray[i].removeAttribute("height");
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...