Outils de développement de navigateur: quelle est la position de l'élément HTML?
Les outils de développement Web modernes (dans Chrome/FF/IE, par exemple.) Fournissent un moyen de voir le "modèle de boîte" et les "propriétés CSS calculées" d'un élément particulier. Cependant;
Existe-t-il un moyen de contrôler facilement la position finale calculée/mise en page avec de tels outils?
De préférence absolu, mais à l'intérieur du récipient parent convient également. Je suis modifiable pour utiliser l'un des navigateurs [Windows] mentionnés précédemment, mais je préfère utiliser Chrome.
Dans Chrome, Firefox, Edge et IE11 +, lorsqu'un élément est sélectionné, vous pouvez accéder à cet élément dans la fenêtre de la console en tapant:
$0
Vous pouvez ensuite interroger et manipuler en utilisant API DOM Javascript , qui a une méthode très utile appelée Element.getBoundingClientRect () .
Il vous suffit donc de taper ce qui suit dans la fenêtre de la console lorsqu'un élément est sélectionné:
$0.getBoundingClientRect()
et le navigateur renverra un objet tel que:
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
Outils de développement Chrome -> Paramètres -> Général -> Éléments -> Afficher les règles.
Vous pouvez également installer Chrome plugins qui vous donneront un peu plus de fonctionnalités.