Die Devtools jedes Browsers zeigen die Felder für Inhalt, Füllung, Rand und Rand eines Elements an. Gibt es eine Möglichkeit, einen Browser (irgendeinen Browser) dazu zu bringen, mir die Grundlinie eines Elements zu zeigen? Es würde erheblich beim Debuggen der Inline-Box-Ausrichtung helfen.Wie kann ich die Grundlinie eines HTML-Elements sehen?
Antwort
Dies wird Ihre Frage nicht vollständig beantworten, aber ich hoffe, es kann mindestens einige Verwendung sein ... oder vielleicht wird es auch jemanden inspirieren, um mit einem besseren zu kommen!
Der Trick besteht darin, a) die Position der Basislinie zu berechnen und b) diese Information für alle Elemente verfügbar zu machen.
Die Methode zur Berechnung der Grundlinie ist überraschend nicht geradlinig: Wir müssen zwei Elemente erstellen, von denen eines die Schriftgröße 0 hat, und dann den Unterschied in der obersten Position zwischen ihnen berechnen.
Um diese Berechnung in alle HTML-Elemente einzufügen, verwenden wir die Methode defineProperty
, um dem Prototyp der Klasse HTMLElement
eine neue Eigenschaft hinzuzufügen.
// the main functionality
Object.defineProperty(Element.prototype, 'baselinePosition',
{
get: function() {
var fs0 = document.createElement('span');
fs0.appendChild(document.createTextNode('X')); fs0.style.fontSize = '0'; fs0.style.visibility = 'hidden';
var fs1 = document.createElement('span');
fs1.appendChild(document.createTextNode('X'));
this.appendChild(fs1); this.appendChild(fs0);
var result = fs0.getBoundingClientRect().top - fs1.getBoundingClientRect().top;
this.removeChild(fs0); this.removeChild(fs1);
return result;
},
enumerable: true
});
// and a test run.
var pos = document.getElementById('test').baselinePosition;
console.log('The baseline is at ' + pos + ' px.');
<p id="test">This is the test.</p>
Der Nachteil hierbei ist, dass Sie einen Browser benötigt, die alle Eigenschaften von HTML-Element-Knoten zeigen. Bisher ist das einzige, was ich gefunden habe, SeaMonkey's DOM Inspector.
Andere Browser entweder nicht über die Fähigkeit, JavaScript-Knoteneigenschaften zu zeigen, oder sie zeigen nur die integrierten in diejenigen, nicht die vom Benutzer hinzugekommenen.
Wie auch immer, hoffe das hilft ein bisschen!
Das ist ein guter Trick! Ich könnte das verwenden, um einen Hintergrundbildgradienten hinzuzufügen, der die Grundlinie einzeichnen wird. – Peeja
- 1. Wie kann ich die Prototypkette eines JavaScript-Objekts sehen?
- 2. Warum kann ich die Schlüssel eines Fehlerobjekts nicht sehen?
- 3. Python Grundlinie Korrekturbibliothek
- 4. Wie kann ich die Höhe der Grundlinie einer bestimmten Schriftart erhalten?
- 5. Wie kann ich "rowcount" (?) Eines Textlabels in Xamarin-Formularen sehen?
- 6. Kann ich die C++ - Codestruktur sehen?
- 7. Wo kann ich die Konsolenanmeldung OpenShift sehen?
- 8. Wie kann ich die Clientseite von HttpResponseMessage sehen?
- 9. Ich kann die Ansicht nicht sehen 2
- 10. Wie kann ich die Unterschiede zwischen zwei MySQL-Dumps sehen?
- 11. Wie kann ich die Standardausgabe einer Java-Aufgabe sehen?
- 12. Wie kann ich die aktuell verwendete Quote in BQ sehen?
- 13. Wie kann ich die Ausgabe von Console.Error.WriteLine sehen?
- 14. Wie kann ich die ausstehenden Änderungen des Entity Framework sehen?
- 15. Wie kann ich Abfragen sehen, die gegen Oracle ausgeführt werden?
- 16. Wie kann ich die Kern-Android-Klassen sehen?
- 17. EntityFramework-Ausnahme: Wie kann ich die echte Abfrage sehen
- 18. Wie kann ich die gesamte Eingabeaufforderung des Atomeditors sehen?
- 19. Wie kann ich die Fehler in console.developers.google.com sehen?
- 20. Wie kann ich die Eingaben für eine LINQ-Abfrage sehen?
- 21. Cache-Miss? Wie kann ich das sehen?
- 22. Wie kann ich den Ausführungsplan sehen?
- 23. Codeignender Online Besucher Ich kann sehen, wie?
- 24. Wie kann ich dies entschlüsseln, damit ich es sehen kann
- 25. Wie kann ich die Kernel-Stack-Funktion eines bestimmten Threads sehen?
- 26. Wie kann ich die Ausgabe eines über qsub in meinem Terminal übermittelten Jobs sehen?
- 27. Kann ich einen BufferedReader sehen?
- 28. ggplot2 und geom_density: Wie wird die Grundlinie entfernt?
- 29. Endlosschleife kann ich nicht sehen
- 30. Ich kann die Schaltfläche nicht über die Vollbildansicht sehen.
Diese Frage scheint eine Negativabstimmung und eine Abstimmungsabstimmung zu haben, aber keinen Kommentar zu erklären. Kann ich etwas tun, um diese Frage zu verbessern? – Peeja
Die enge Abstimmung ist für "ein Werkzeug empfehlen", also denken sie vielleicht, dass Sie nach einer Debugging-Bibliothek oder so etwas fragen. –
Ah, nein, ich frage, ob der Browser es anzeigen kann. – Peeja