Maison  >  Article  >  interface Web  >  Comment changer la position du div avec jquery

Comment changer la position du div avec jquery

WBOY
WBOYoriginal
2022-03-22 17:21:143328parcourir

Dans jquery, vous pouvez utiliser la méthode css() avec l'attribut margin pour changer la position du div. La méthode css() est utilisée pour définir ou renvoyer un ou plusieurs attributs de style de l'élément sélectionné. utilisé pour définir la marge extérieure de l'élément. Syntaxe Il s'agit de "div object.css (marge : valeur de position modifiée ;)".

Comment changer la position du div avec jquery

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Comment changer la position de div dans jquery

Dans jquery, le style de position de div est principalement défini via la méthode css() pour modifier la position de div

Créez un nouveau fichier html et nommez-le test.html pour expliquer la modification dynamique de la position jQuery DIV. Créez un module à l'aide de balises div pour modifier dynamiquement sa position à l'aide de la méthode jquery ci-dessous. Définissez l'attribut de classe du div sur mydiv, qui est principalement utilisé pour obtenir l'objet div via cette classe ci-dessous.

Afin de montrer l'effet évident, utilisez CSS pour définir la hauteur et la largeur du div sur 150 px, et la bordure sur une bordure grise unie de 1 px. Créez un bouton à l'aide de la balise bouton, liez l'événement onclick au bouton et exécutez la fonction edit() lorsque vous cliquez sur le bouton.

Dans la balise js, créez la fonction edit(). Dans la fonction, obtenez l'objet div via le nom de la classe et utilisez la méthode css() pour définir la marge gauche-gauche et la marge supérieure-haut pour modifier la position. de la div.

Comment changer la position du div avec jquery

Ouvrez le fichier test.html dans le navigateur, cliquez sur le bouton pour voir l'effet.

Comment changer la position du div avec jquery

Comment changer la position du div avec jquery

Résumé :

1. Créez un fichier test.html.

2. Dans le fichier, utilisez la balise div pour créer un module, et utilisez la balise bouton pour créer un bouton pour déclencher l'exécution de la fonction js.

3. Créez une fonction dans la balise js. Dans la fonction, obtenez l'objet div et utilisez la méthode css() pour définir la marge gauche-gauche et la marge supérieure-haut pour modifier la position du div.

Notes

La méthode css() prend en charge la définition de tous les styles CSS. Plusieurs styles sont séparés par des virgules.

Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn