Как изменить атрибут в HTML, используя JavaScript - PullRequest
Новая
       4

Как изменить атрибут в HTML, используя JavaScript

3 голосов
/ 27 декабря 2010

Это мой код, так как я могу изменить атрибут ширины? 

<html>
<head>
<script type="text/javascript">
 document.getElementById("cpul").src="hello.jpg";
</script>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">

</body>
</html>

Вышеприведенный сбой и изображение вообще не меняется !!

Но почему, когда я используюэтот код (копия с другого сайта), изображение меняется 

<html>
<head>
<title>JS DD Function</title>
<script type="text/javascript">
    function jsDropDown(imgid,folder,newimg)
 { 
 document.getElementById(imgid).src="http://www.cookwithbetty.com/" + folder + "/" + newimg + ".gif";
 }
</script>
</head>
<body>
<table>
  <tr>
    <td>
Foods: <select name="food" onChange="jsDropDown('cful','images',this.value)">
       <option value="steak_icon">Steak</option>
    <option value="salad_icon">Salad</option>
    <option value="bread_icon">Bread</option>
    </select><br />
     </td>
  <td>
         <img src="http://www.cookwithbetty.com/images/steak_icon.gif" id="cful">

</body>
</html>

Ответы [ 5 ]

8 голосов
/ 27 декабря 2010

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

<html>
<head>
   <title>Foo</title>
</head>
<body>

<img src="hi.jpg" width="100" height="100" id="cpul">
<script type="text/javascript">
   document.getElementById("cpul").src="hello.jpg";
</script>
</body>
</html>
3 голосов
/ 27 декабря 2010

Вставьте событие onload для окна, чтобы код не выполнялся до загрузки HTML-кода изображения. И используйте атрибут width, чтобы установить ширину. 

<html>
  <head>
    <title>Change my image width</title>
    <script type="text/javascript">
      window.onload = function() {
        var myImage = document.getElementById("cpul");
        myImage.src = "hello.jpg";

        // change width
        myImage.width = 200;
      };
    </script>
  </head>
  <body>
    <img src="hi.jpg" width="100" height="100" id="cpul"> 
  </body>
</html>
0 голосов
/ 27 декабря 2010

Вы упомянули ширину, если вы изменяете размер изображения, только если оно больше определенной ширины, вы можете использовать событие onload самого изображения: 

<img src="hi.jpg" id="cpul" onload="if (this.width > 100) this.width = 100;" />

Это изменит размеризображение до ширины 100 пикселей (и соответствующей высоты), только если оно больше 100, иначе оно ничего не изменит, т. е. уменьшит, но не увеличит изображение.

Если вы имели в виду изменение источника изображения с помощью кодадругие ответы - это все, что вам нужно.:)

0 голосов
/ 27 декабря 2010

В вашем первом примере JavaScript выполняет немедленно . На этом этапе документ по-прежнему анализируется, и в DOM не существует элемента с указанным идентификатором.

Во втором примере JavaScript выполняется в ответ на событие change, которое не сработает, пока элемент не существует (ну, если только кто-то не очень очень * быстр с мышью) .

Вам нужно отложить вызов JavaScript до тех пор, пока элемент не существует, либо:

  • Перемещение <script> после <img>
  • Изменение сценария, чтобы он определял функцию, а затем вызов этой функции в ответ на событие (например, load).
0 голосов
/ 27 декабря 2010

Вы пытаетесь получить доступ к элементу DOM, когда этот элемент еще не создан. Переместите тег script в конец страницы (непосредственно перед закрытием body).

Что касается «изменения ширины изображения». Как только вы получите изображение (через document.getElementById), просто установите его width свойство: 

var myImg = document.getElementById ( 'imgsid' );
myImg.width = 100;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...