comment changer l'attribut en html en utilisant javascript

Ceci est mon code, alors comment puis-je changer l'attribut de largeur?comment changer l'attribut en html en utilisant javascript

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

Ce qui précède est l'échec et l'image aucun changement !!

Mais pourquoi quand j'utiliser ce code (copie d'un autre site), l'image est le changement

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

Source

2010-12-27 dramasea

La raison la plus probable que votre code ne fonctionne pas est qu'il est en cours d'exécution avant que l'élément existe dans le DOM. Vous devez définir votre code pour qu'il s'exécute sur l'événement load de la fenêtre ou placez-le à la fin du document pour vous assurer que l'élément existe avant d'essayer d'y accéder.

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

Source

2010-12-27 13:33:11 tvanfosson

pouvons-nous changer n'importe quel attribut tel que la largeur, la hauteur etc.? – dramasea

@dramasea - oui, bien que vous devriez probablement utiliser des propriétés de style (CSS) ou des classes à la place pour la cohérence. – tvanfosson

Vous essayez d'accéder à un élément DOM lorsque cet élément est pas encore créé. Déplacez votre tag script en bas de la page (juste avant la fermeture body). En ce qui concerne "changer la largeur de l'image"

Une fois que vous obtenez l'image (via document.getElementById), situé juste à son width propriété:

var myImg = document.getElementById ('imgsid'); 
myImg.width = 100;

Source

2010-12-27 13:32:34

Dans votre premier exemple, le JavaScript exécute immédiatement . À ce stade, le document est toujours analysé et aucun élément avec l'ID spécifié n'existe dans le DOM.

Dans le second exemple, le JavaScript est exécuté dans la réponse à un événement change, qui ne sera pas le feu jusqu'à ce que l'élément existe (bien, pas à moins que quelqu'un est très très rapide avec la souris).

Vous devez retarder l'appel JavaScript jusqu'à ce que l'élément existe soit:

Déplacement du <script> à après la <img>
Modification du script pour qu'il définit une fonction, puis appeler cette fonction dans réponse à un événement (tel que load).

Source

2010-12-27 13:33:37 Quentin

Insérez l'événement onload dans la fenêtre, afin que le code ne s'exécute pas avant le chargement du code html de l'image. Et utilisez l'attribut width pour définir la largeur.

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

Source

2010-12-27 13:34:51

Vous avez mentionné la largeur, si vous êtes après le redimensionnement de l'image que si elle est plus grande que une certaine largeur spécifique, vous pouvez utiliser l'événement onload de l'image elle-même:

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

Cela redimensionner la l'image à 100 pixels de largeur (et la hauteur respective) seulement si elle est supérieure à 100 sinon elle ne changera rien, c'est-à-dire qu'elle réduira l'image mais pas la plus grande.

Si vous vouliez changer la source d'image par code, les autres réponses sont tout ce dont vous avez besoin. :)

Source

2010-12-27 13:41:46

comment changer l'attribut en html en utilisant javascript

Répondre

Questions connexes