Question de base sur le positionnement des éléments DOM avec JavaScript

Question

J'ai récemment commencé à apprendre le JavaScript et à manipuler les éléments DOM. Jusqu'ici, c'était super et j'apprécie vraiment l'apprentissage.

Cependant, il y a quelque chose que j'ai de la difficulté à saisir. C'est le positionnement des éléments avec le JavaScript. Tous les décalages, les clients X (Y) et d'autres me déroutent. Et c'est frustrant pour moi, parce que je connais HTML et CSS au niveau très correct, et j'aimerais apprendre et avoir le contrôle sur le positionnement JavaScript aussi.

Avant d'écrire cette question ici, j'ai fait une recherche très approfondie sur Google et le rouge quelque part entre 20-30 exemples (pas de blague ici). Ce que je voudrais obtenir comme réponses est des liens vers des articles sur Internet où le concept de positionnement des éléments avec JavaScript est expliqué dans un langage normal.

J'ai écrit ici parce que je suis vraiment frustré par mon incapacité à le comprendre par moi-même.

Merci d'avance.

Answer 1

This email peut vous être utile. Je ne sais pas si vous êtes tombé sur google ou non. Il commence à parler de la position avec CSS, mais si vous lisez votre chemin vers le bas, vous verrez le JavaScript.

Hope this helps ;-)

Answer 2

La plus simple façon de positionner un élément de dom sur la page par javascript manipule le style en ligne de l'élément. Par exemple, disons que je veux déplacer un div à 20px vers le bas, et 100px vers la gauche en utilisant javascript.

var myDiv = document.getElementById('myDiv'); 
myDiv.style.position = 'absolute'; 
myDiv.style.top = '20px'; 
myDiv.style.left = '100px'; 

Cela devrait le déplacer à 100,20 sur votre fenêtre de navigateur. Toutes les règles de css s'appliquent ici, donc cela fonctionnera à vos connaissances actuelles de CSS.

La plupart des frameworks javascript supportent cette fonctionnalité de base, YUI a un objet DOM particulièrement utile pour cela. JQuery le fait probablement aussi bien, mais comme je ne suis pas un expert en JQuery, je vais vous diriger vers l'objet Dom de YUI.

http://developer.yahoo.com/yui/examples/dom/index.html