Javascript getElementById()

Question

J'essaie de créer une fonction javascript générique qui changerait les attributs des événements.

La façon dont il fonctionnerait est

function fooFunction(sourceElement) 
{  
    var newName = sourceElement+'Span';  
    var newElement = document.getElementById(newName); 
    //Important line 
    newElement.property = "enter properties here"; 
} 

et je l'appellerais avec quelque chose comme

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction(this.id);"/> 
<span id="fooSpan" name="fooSpan">some text here</span> 

Donc, en théorie, en vol stationnaire l'image, il faut changer ce que je dois propery changer sur l'objet fooSpan. Cela fonctionne dans Opera, mais sur IE il renvoie un objet nul.

Des idées?

L'idée serait que j'aurais plusieurs images qui déclencheraient automatiquement le changement de propriété sur l'étendue de texte associée (typiquement le style css).

Answer 1

Etes-vous sûr d'obtenir l'ID correctement dans IE? Peut-être que l'ID transmis est nul dans IE (peut-être que this.id ne fonctionne pas?).

Essayez d'appeler comme ceci:

<img src="foo.gif" id="foo" name="foo" onmouseover="fooFunction('foo');"/> 

et voir si cela aide. Je ne vois aucune raison pour laquelle getElementById() échouerait, donc la seule chose à laquelle je peux penser est que c'est un problème d'identification.

Answer 2

Peut être cette ligne ne fonctionnera pas dans IE. "newElement.property" Je ne connais pas la raison exacte.

Vous pouvez utiliser cette place de cette ligne

newElement.setAttribute (propriété, "saisir des propriétés ici");

En attendant, j'essaie de trouver la raison derrière l'erreur.

Answer 3

Ma suggestion serait de faire quelque chose comme ça.

function fooFunction(sourceElement,property,propertyValue) {  
    var newElement = document.getElementById(sourceElement); 
    newElement.setAttribute(property,propertyValue); 
}; 

Et votre HTML ressemblerait à ceci:

<img src="foo.gif" id="foo" name="foo" 
      onmouseover="fooFunction('fooSpan','class','mouseover_span');"/> 
<span id="fooSpan" name="fooSpan">some text here</span> 

Answer 4

Je FORTEMENT vous invite à envisager d'utiliser la méthode de attr() intégré jQuery qui intègre la fonction que vous voulez parfaitement dans les navigateurs et est incroyablement facile à utiliser.

En utilisant votre exemple, si vous vouliez changer la propriété « src » pour « foo », vous pouvez le faire en une seule ligne de code:

$("#foo").attr("src","images/whatever.png"); 

De même, si vous vouliez changer le code html DANS « fooSpan », tout ce que vous auriez à faire est:

$("#fooSpan").html("something else"); 

vous pouvez même lier ces à des événements qui vont vous donner beaucoup plus de flexibilité que la propriété onmouseover:

$(document).ready(function(){ 
$("#foo").mouseover(function(){ 
    $("#fooSpan").html("something else"); 
    $("#foo").attr("src","images/whatever.png"); 
    }); 
});