Javascript getElementById <img> - PullRequest
Новая
       2

Javascript getElementById <img>

1 голос
/ 11 декабря 2010

Мне было интересно, есть ли способ изменить свойство onclick изображения с помощью getElementById?

Например, 

lastTopic = document.getElementById('topicID').src;
lastTitle = document.getElementById('topicID').title;

эти переменные сохранены, поэтому мне было интересно, есть ли способтакже получить доступ к связанному событию onclick?

спасибо.

Ответы [ 3 ]

6 голосов
/ 11 декабря 2010

Конечно, чтобы установить свойство onclick: 

document.getElementById('topicID').onclick = function () {
   ...
};

Или получить его: 

alert(document.getElementById('topicID').onclick);
4 голосов
/ 11 декабря 2010

Важно помнить, что на самом деле является onclick: это атрибут (и отраженное свойство), который можно использовать для присоединения обработчика к событию click с использованием старого "DOM0" (например, никогда не стандартизированного ) механизм.

Если вы подключаете обработчик click с использованием стандартизированного механизма, такого как addEventListener или почти эквивалентный IE attachEvent, onclick останется null или undefined, поскольку они не назначены для onclick атрибут или свойство.

Вот исследование этой разницы ( живой пример ):

HTML: 

<p>This one has an onclick:
<img src='http://www.gravatar.com/avatar/0f1f6b8a8416c6cf0a97cfc864889788?s=32&d=identicon&r=PG' id='dom0img' onclick='dom0click(this);'></p>
<p>This one has a DOM2 click handler:
<img src='http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG' id='dom2img'></p>

JavaScript: 

window.onload = function() {

  var dom0img, dom2img;

  dom0img = document.getElementById('dom0img');
  dom2img = document.getElementById('dom2img');
  if (dom2img.addEventListener) {
    dom2img.addEventListener('click', dom2click, false);
    display("Attached DOM2-style handler to dom2img via addEventListener");
  }
  else if (dom2img.attachEvent) {
    dom2img.attachEvent('onclick', dom2click);
    display("Attached DOM2-style handler to dom2img via attachEvent");
  }
  else {
    display("Can't attach DOM2-style handler to dom2img");
  }

  display("dom0img.onclick = " + dom0img.onclick);
  display("dom2img.onclick = " + dom2img.onclick);
};

function dom0click(img) {
  display("DOM0 click on " + img.id);
}
function dom2click() {
  display("DOM2 click on " + this.id);
}
function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = msg;
  document.body.appendChild(p);
}​

Вывод на Chrome: 

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = null

Вывод в IE6 и IE8: 

Attached DOM2-style handler to dom2img via attachEvent
dom0img.onclick = function anonymous() { dom0click(this); }
dom2img.onclick = null

Вывод в Firefox: 

Attached DOM2-style handler to dom2img via addEventListener
dom0img.onclick = function onclick(event) { dom0click(this); }
dom2img.onclick = undefined
1 голос
/ 11 декабря 2010

вы можете получить любое значение атрибута DOM, используя метод element.getAttribute (attributeName).

Как сказал @ box9, вам нужно динамически связывать событие onclick или через атрибут onclick в теге изображения.

...