Wie können Sie die Eigenschaften eines DOM-Elements anzeigen, wenn sich diese in Echtzeit ändern?

Question

Wie können Sie die Eigenschaften eines DOM-Elements anzeigen, wenn sich diese in Echtzeit ändern?

903

Horn OK Please 2012-11-14 в 21:12

JavaScript-Code kann die Eigenschaften / Attribute von DOM-Elementen in Echtzeit aktualisieren, indem auf Ereignisse usw. reagiert wird. Hier ist ein Beispiel.

Bewegen Sie in der Tabelle auf dieser Seite die Maus über die Zellen. Beachten Sie, wie sie die Farbe ändern, wenn sich die Maus darauf befindet, und die Farbe verschwindet, wenn Sie die Maus in eine andere Zelle bewegen.

Nun möchte ich mit Firefox oder Chrome (aber nicht mit IE, Opera usw.) die Hintergrundfarbe der in Echtzeit aktualisierten Zellen in RGB, Hex oder sonstigem untersuchen, während der Mauszeiger die Region betritt und verlässt und veranlasst die JS, ihre Sache zu tun.

Das Verhalten, das ich derzeit beobachte, ist, dass die Inspect-Element-Funktionalität von Firefox und Chrome den Wert der Eigenschaften nicht aktualisiert, wenn sie von JavaScript aktualisiert werden. Um den neuesten Wert der Eigenschaft anzuzeigen, muss ich das Element erneut überprüfen, und es wird eine Momentaufnahme der Werte benötigt. Da sich die Werte jedoch nur ändern, während sich die Maus auf ihnen befindet, kann ich keine Momentaufnahme des gewünschten Werts machen, während sich der Mauszeiger über der Zelle befindet, da ich meine Maus aus der Zelle entfernen muss, um "Inspect" auszuwählen Element "Element in der Rechtsklickliste!

Wenn es möglich ist, die Werte in Echtzeit mit Firefox oder Chrome oder einer Erweiterung auf einer aktuellen Version der Software (bis auf den neuesten Stand) aktualisieren zu lassen, geben Sie bitte die entsprechenden Anweisungen an.

2

1 Antwort auf die Frage

4

Accepted Answer · 2012-11-14 22:56:48

Wenn Sie eine der Zellen in der Demo auswählen, wird automatisch <div>die Zelle ausgewählt, die in der Zelle enthalten ist, es sei denn, Sie treffen die Zelle genau am Rand:

enter image description here

Die Stiländerung wird jedoch auf die Zelle angewendet, nicht auf die <div>. Wenn Sie den Mauszeiger über die Zelle bewegen, während sie in den Entwicklertools fokussiert ist, sollten Sie die Anwendung des neuen CSS sehen können. Darüber hinaus können Sie den Bereich Berechneter Stil erweitern, um den gesamten Satz von Stilen anzuzeigen:

enter image description here

Wie können Sie die Eigenschaften eines DOM-Elements anzeigen, wenn sich diese in Echtzeit ändern?

1 Antwort auf die Frage

Verwandte Probleme