Javascript - changer dynamiquement la largeur d'un élément

Il y a quelques questions similaires sur Stack mais je pense que le mien est le résultat d'une erreur de syntaxe de ma part. Quoi qu'il en soit, je construis une lightbox en javascript et je veux mettre dynamiquement la position absolue (left % css) à la moitié de la largeur de l'élément.Javascript - changer dynamiquement la largeur d'un élément

Ceci est un extrait du code. code complet est ici http://jsfiddle.net/Yab3Q/4/

var modal = document.getElementById(btnId+"-modal"); 
var modalChildren = modal.childNodes; 

for (var x = 0; x<modalChildren.length; x++){ 
    if (!(modalChildren[x].className === "lightBox")){ 
     var childWidth = modalChildren[x].offsetWidth; 
     var halfWidth = childWidth/2; 
     modalChildren[x].style.left = halfWidth + "px"; 
    } 
}

La ligne modalChildren[x].css.left = halfWidth + "px"; est de retour "Uncaught TypeError: Impossible de définir la propriété 'left' undefined". Cependant, modalChildren[x].className et modalChildren[x].offsetWidth; renvoient tous les deux les valeurs attendues, donc je ne suis pas sûr pourquoi je peux voir mais ne pas mettre à jour le CSS ici.

Source

2012-12-15 Jascination

Voulez-vous dire cette ligne? 'modalChildren [x] .style.left = demi-largeur +" px ";' – NullRef

Vous essayez de modifier les propriétés de style des éléments suivants:

0: <div> 
1: #text 
2: <img> 
3: #text

Vous pouvez voir cette liste pour vous-même en tapant

console.log(modalChildren)

étant donné qu'un textNode n'a pas de propriété de style, une erreur est renvoyée

Source

2012-12-15 06:36:23

Vous l'avez. Quelle est la meilleure façon d'exclure le '# text' de l'instruction' if' que j'ai? J'ai essayé 'si (! (ModalChildren [x] .className ===" lightBox ") &&! (ModalChildren [x] .nodeType ==" #text "))' mais en vain – Jascination

juste essayer ceci: 'if (modalChildren [x] .style) ' –

Oui, ça l'a fait. Cheers mate. – Jascination

noeud texte

n'a pas de propriété de style: journal et vérifier:

for (var x = 0; x<modalChildren.length; x++){ 
      console.log(modalChildren[x]); 
      console.log(modalChildren[x].style); 
      if (!(modalChildren[x].className === "lightBox")){ 
       var childWidth = modalChildren[x].offsetWidth; 
       var halfWidth = childWidth/2; 
       modalChildren[x].style.left = halfWidth + "px"; 
      } 
     }

Jetez un oeil à des types de noeuds: http://www.javascriptkit.com/domref/nodetype.shtml

Source

2012-12-15 06:35:51 karaxuna

Javascript - changer dynamiquement la largeur d'un élément

Répondre

Questions connexes