Style eines untergeordneten DIV-Tags ergänzen?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausblenden
baum
button
code
display
drehung
element
fehler
frage
funktion
grad
knoten
liefern
mache
nutzer
page
setzen
speichern
url
werte speichern
-
Hallo,
ich habe da etwas kniffliges (aus meiner Sicht). Ich möchte einen Kartenausschnitt drehen auf einer Webseite, dessen Besitzer diese Funktion nicht einbauen will... Es ist die Funktion da, die Kartenansicht auszudrucken und ich habe es probiert, daß die Ansicht bis auf den Ausdruck nicht durch neu-laden verloren geht.
Mit der Chrome-Konsole direkt klappt das. Nun möchte ich es automatisieren mit Javascript in einer Browser-Erweiterung.
Dazu muss ich ein untergeordnetes DIV manipulieren; das DIV darüber kann ich mit der ID finden.
Das sieht so aus:
<div id="map_canvas" class="map-canvas" style="position: relative; overflow: hidden;"> <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"> ... </div> </div>
Das map_canvas finde ich so:
und kann dann eine Drehung ausführen. Aber ich muss ein paar weitere untergeordnete Elemente ebenfalls verändern, damit sich nur bestimmte Ebenen verändern.var map_id=document.getElementById("map_canvas"); map_id.style.webkitTransform="rotate(30deg)";
Da das aber nur der Gipfel von unüberschaubar vielen DIVs ist, die darunter folgen und keine ID haben, frage ich mich jetzt, wie ich an die nachfolgenden Unter-DIVs komme?
Ergänzend wäre es hilfreich, wenn ich den letzten Winkelwert speichern könnte, wenn der Nutzer dann zB 5 Grad weiterdrehen möchte. Wie mache ich das mit dem Werte speichern am besten - irgendwo auf der Page einen Value setzen?
Vielleicht möchte ich später auch die Kartenfarben ändern, das ist ähnlich, aber werd ich dann fragen
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wenn du ein Element ausgewählt hast, kannst du mit dem Attribut "children" an die inneren Elemente gelangen.
Also, ein deinem Beispiel würde
ein Array liefern mit allen Elementen, die sich im Baum direkt unter dem ausgewählten div befinden. Ausgenommen sind Text-Elemente, also die Textbereiche, die nicht in ein weiteres Tag eingeschlossen sind.map_id.children
Du musst dich dann von Knoten zu Knoten durch den Baum nach unten vorarbeiten. Oft reicht es, die children abzuzählen, um an das gewünschte Element zu kommen.
mathesoft schrieb:
Klar, dazu reicht zunächst einmal eine Variable. Im Normalfall hast du einen Skriptblock, in dem die Funktion zur Drehung deklariert ist. Du kannst dann außerhalb des Funktionsblocks die Variable deklarieren, damit sie ihren Wert behält solange die Seite offen ist.
Ergänzend wäre es hilfreich, wenn ich den letzten Winkelwert speichern könnte, wenn der Nutzer dann zB 5 Grad weiterdrehen möchte. Wie mache ich das mit dem Werte speichern am besten - irgendwo auf der Page einen Value setzen?
Möchtest du den Wert auch gespeichert lassen wenn der Nutzer die Seite schließt, musst du z.B. auf LocalStorage zurückgreifen. -
Hallo,
vielen Dank erstmal, das klappt schon prima.
Jetzt stehe ich vor dem Problem, daß ich übergeordnete Elemente ausblenden möchte. Dazu füge ich einen Button hinzu, der das erledigt (appendChild).
Wird der Button nun angeklickt, will ich 3 Ebenen höher alles darunter ausblenden (ein Container eben).
In dieser CallBack-Funktion schreibe ich:
function $id(id) { return document.getElementById(id); } //...Buttons legt erfolgreich meine Function an: AddButton( i, function() { var loc=$id("inject_nb"+i); // in folgender Zeile meldet die Console den Fehler: loc= loc.parentElement.parentElement; //loc (=hierbinich) - 1 höher - noch 1 höher if (loc) loc.parentElement.style.display = "none"; //wenn es diese Ebene gibt, kann man noch 1 höher }
Leider erläutert mir die Chrom-Console:
Uncaught TypeError: Cannot read property 'parentElement' of null
Aussehen in der Seite tut das so:
... //ganze Menge DIVs davor <div id="lolist"> <div class="lo-group"> <div class="los"> <div class="caption">Überschrift <input type="button" id="inject_nb0" value="Verbergen" ></div> <div class="lo-list"> ... //und es geht noch tiefer
Ich will also "lo-group" mit Klick auf den "inject_nb"-Button ausblenden. Von den "lo-group" kann es nachfolgend zwischen 0 und 25 geben...
Ich habe es anstelle von parentElement auch mit parentNode versucht - wenn ich diese Seite richtig verstehe, sollte das funktionieren...
Was mache ich falsch? -
Ich konnte jetzt bei den geposteten Codestücken nicht direkt einen Fehler erkennen.
Vermutlich bist du auf einen der gemeinen Fallstricke von Javascript hereingefallen. Speziell geht es um die Variable i. Wenn du eine for-Schleife hast, die etwa so aussieht:for (var i=0; i<=25; i++) { // ... }dann solltest du das "var" durch "let" ersetzen, also so:for (let i=0; i<=25; i++) { // ... }Hintergründe dazu gibts z.B. auf Stackoverflow. Das Problem dabei ist, dass die Variable i bis zum Ende gezählt wird und schließlich einen Wert annimmt, der zur Abbruchbedingung führt. Wird dann das Callback aufgerufen, hat i einen zu großen Wert und es wird kein Element mehr gefunden.
Wenn ich mit der Vermutung nicht richtig liege, müsstest du wohl etwas mehr Code liefern. Praktisch wäre, wenn du einen Link zu deiner Seite senden könntest. -
Hm...
Das mit dem let ist interessant, aber der Fehler kam trotzdem noch.
Ich hab plötzlich gedacht, ich probiere mal was ...
var loc=this.parentElement;//$id("THinject_nb"+i); if (loc) loc = loc.parentElement; if (loc) loc.parentElement.style.display = "none";
So geht es. Statt also den Button wiederzufinden, nehme ich hier this und auf wundersame Weise macht es das, was es soll - danke für deine Hilfe
(ich frag bestimmt wieder mal was).
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
