28172 sujets

CSS et mise en forme, CSS3

[Résolu] Déplacement d'un élément par modification du style

Bonjour,
Je cherche depuis plusieurs jours la possibilité de déplacer un élément (div) en modifiant son style (.style.right) par une commande javascript sur un événement onclick.
Au départ ça paraissait simple, mais impossible de faire bouger cette p...n de balise div.

Existe-t-il des restrictions connues pour ce style d'action?

Merci pour vos réponses.
Bonjour,
D'abord tu devrais ajouter un id à ton div
exemple : 

#super {
width:150px;  height:150px;  background-color:yellow;
}



<button id="test"></button>
<div id="super"></div>



// en utilisant jquery
$("#test").on("click",function(){
$("#super").css("margin-right","50px");
});
Merci pour tes remarques.
J'ai un id. Mais le code que tu mets me fait penser à quelque-chose.
Dans ma feuille CSS je déclare le style par la classe (div.formulaire). Or quand j'appelle le div pour modifier son style, je l'appelle par son id (getElementById('formulaire')).

Est-ce que ça peux jouer un rôle?
Modérateur
linux_1970 a écrit :
Merci pour tes remarques.
J'ai un id. Mais le code que tu mets me fait penser à quelque-chose.
Dans ma feuille CSS je déclare le style par la classe (div.formulaire). Or quand j'appelle le div pour modifier son style, je l'appelle par son id (getElementById('formulaire')).

Est-ce que ça peux jouer un rôle?


Normalement non, quand tu modifie le style via Js il se met en code "inline" ( <div style="/* ici */"> ) et du coup il a la priorité.

https://jsfiddle.net/c8c7jj9w/2/
Modifié par _laurent (09 Mar 2018 - 11:54)
Modérateur
Ha ! Bah c'est juste que ton élément n'est pas positionné... il faut lui donner position: absolute ou relative (selon ce que tu veux faire) pour que top left right bottom soient pris en compte...
Modérateur
C'est marqué dans ta console (c'est indispensable de regarder ta console si tu code) :
decalage is not defined


C'est juste lié au fiddle et à l'utilisation de onclick dans le html. Si tu mets le script dans le html ca marche : https://jsfiddle.net/c8c7jj9w/21/

Essaie d'utiliser les eventHandler comme j'avais fait, c'est plus propre normalement.
Merci _laurent pour ton aide.
Je viens de modifier ton test avec "<button id="btn" onclick="document.getElementById('block').style.right = '20px'">Décalage</button>" et ça fonctionne.
Je vais continuer mes recherches car c'est très exactement le code sur ma page, et ça ne fonctionne pas.
Effectivement je vais déployer la console pour continuer mes tests. Je bloque rarement sur du code et je ne pense pas à la console quand ça se corse.

Je te tiens au courant de mes recherches.
Modérateur
Ca marche. Et si jamais tu peux mettre ta page en ligne pour qu'on puisse voir la même chose que toi c'est le top ! Bon courage
Je suis vraiment un gros nase. Smiley biggol Je cherchais donc à déplacer un formulaire qui est masqué hors écran pour le rendre visible quand on l'appelle.
Pour appeler la page je lançais la commande
"window.parent.frames['cadre_formulaire'].location.href='form_activite.php';"
Donc pour déplacer le div qui contient l'iframe, je lançais donc la commande:
"window.parent.getElementById('formIframe').style.right='0px'"

Et bien non il manquait .document
"window.parent.document.getElementById('formIframe').style.right='0px'". Smiley ola Smiley banane

Comme d'habitude la solution est simplissime, mais quand on est dedans depuis trop longtemps, on ne voit plus rien.
Un grand merci à vous deux pour m'avoir mis sur la voie. (utilisation de la console). Smiley prie Smiley merci
Sujet clos
Aller à