Angular 8 mit `document.getElementById(…).style;` ?

[ruutaiokwu]

Hallo zusammen

Kann mir evtl. jemand erläutern, warum das („plain vanilla javascript“) unter TypeScript (JS ist bekanntlich ne Teilmenge davon) in der ngAfterViewInit()-Funktion nicht geht? Ich meine die Alertbox zeigt mir ja JSON an, mit allen CSS-Attributen…

Also: Ich sehe da keinen rationalen Grund, warum dies nicht funktionieren sollte. Und: Bitte keine „Tipps“ in der Art „in Angular macht man das aber anders!!“. Es geht um die Sache an sich, die Frage ist somit eher akademischer Natur…

Code hier:

ngAfterViewInit()
  {
 
  try {

      
      $(document).ready(function(event) {       
    
    setTimeout(function() {     
    
    
    try
    {
      var style = document.getElementById("sumup-card").style;
      
      style.border = "1px solid #000000;";
      
      alert(JSON.stringify(style));
    }
    catch(err)
    {
      alert(err);
    }
    
    
    }, 200);   
    
    
        });   
        }
        catch(err)
        {
        alert(err);
        }
  }

Angular HTML-Template:

<style>
<!--

#sumup-card {
  width: 640px;
  height: 0px;
  /* border: 1px solid #000000; */
}

//-->
</style>

<div id="sumup-card"></div>
<router-outlet></router-outlet>

…nun bin ich ca. schon den ganzen Tag dran, was mich zwar bei Angular nicht mehr wirklich verwundert.

Das was man mit HTML/CSS/JavaScript/JSON/XML „by scratch“ mit einer Minute Zeitaufwand berechnet, kann mit Angular „locker“ 1 Tag bis 1 Woche sein…

…und nein, ich denke nicht dass diese Einschätzung übertrieben ist!! Vor allem nicht am Anfang, da es eine äusserst steile Lernkurve hat.

(Eigentlich hasse ich den S*****s abgrundtief, ein Stellenwechsel wäre aber leider die einzige Option um was dagegen zu tun…)

 

[Thallius]

Ich kann Dir nicht folgen. Was steht in style denn drin und was erwartest du und was geht überhaupt nicht?

 

[thecain]

Was ist denn die Anforderung? Sonst ein Beispiel auf StackBlitz erstellen

 

[ruutaiokwu]

Hallo zusammen

Vielen Dank für eure Feedbacks!!

Ich möchte dem Div mit der ID `sumup-card` über "normalen" JavaScript unter Angular einen border mit `1px solid #000000` zuweisen - also das was ich im Angular-HTML-Template im lokalen CSS-`style`-Tag auskommentiert habe.

Im `var style` von `var style = document.getElementById("sumup-card").style;` ist jedenfalls was drin, wenn man es mit JSON.stringify(...) serialisiert.

Lesen kann ich demzufolge, aber schreiben/setzen geht nicht. Sollte aber gemäss irgendwelchen Anleitungen im Netz ne Hello-World-Aufgabe sein, Z.B. über:

var style = document.getElementById("sumup-card").style;
style.border = "1px solid #000000;";

Oder halt nicht über eine "Referenz" mithilfe einer Varaible - sondern direkt:

document.getElementById("sumup-card").style.border = "1px solid #000000;";

 

[ruutaiokwu]

JSON-Serialisierung:

 

[thecain]

Ich vermute mal du hast aufgrund der Encapsulation keinen Zugriff... Aber das Beispiel ist auch null reproduzierbar und die schlechteste Idee irgendwas zu machen.

Wenn du also ein konkrete Anforderung hast und eine Lösung suchst, helfe ich gerne. Aber diesen Weg aus "rein akademischen Gründen" weiter zu gehen sehe ich nicht ein.

 

[ruutaiokwu]

"Aber diesen Weg aus "rein akademischen Gründen" weiter zu gehen sehe ich nicht ein."

Hand auf's Herz: Ich muss zugeben, dass ich "plain old javascript" viel lieber mag als jQuery, Angular, TypeScript, was auch immer.

Bin momentan auch noch am lernen, habe aber schon geschaut was der "offizielle" Weg ist... sieht x mal komplizierter aus als als document.getElementById(...)

Ich denke, die pragmatische Lösung lautet aktuell, schlicht einfach CSS ohne JavaScript zu setzen - welche der 3 Formen auch immer ist im Prinzip egal: lokal, extern, inline... das klappt sowieso. ;-)

 

[Thallius]

warum setzt du die border nicht einfach über das ändern der Klasse?

 

[ruutaiokwu]

Also `class="..."`...?

Meinst du mit externem oder lokalem CSS, oder per JavaScript über

var element = document.getElementsByClassName("className");
element[0].style.border = "1px solid #000000;"

...kann ich ja probieren, wird wohl aber genauso scheitern wie der `getElementById(...)`-Ansatz.

Es gibt ja keinen (zumindest mir offensichtlichen) Grund warum getElementById nicht geht. Geht aber trotzdem nicht! ;-)

Somit sehe ich auch keinen Grund, warum dann plötzlich getElementsByClassName funktionieren sollte.

Ich meine an meinem getElementById-Ansatz ist ja soweit nix falsch, zumindest nicht wenn man Angular, TypeScript & Co. mal "wegdenkt"...

 

[ruutaiokwu]

Exakt das gleiche Problem mit getElementsByClassName: Die CSS-Infos kommen daher und können ausgelesen, und in serialisierter Form mit einem alert auf den Bildschirm gebracht werden. (Analog Screenshot oben)

Beim setzen / schreiben klappt es aber wieder nicht:


TypeScript / JavaScript / Angular:

  ngAfterViewInit()
  {
    try { 
      $(document).ready(function(event) {
        setTimeout(function() {
        try {       
        /*
          var style = document.getElementById("sumup-card").style;
          style.border = "1px solid #000000;";
          alert(JSON.stringify(style));
          */         
          var elem = document.getElementsByClassName("sumup-card-class")[0];
          var style = elem.style;                   
          style.border = "1px solid #000000;";         
          alert(JSON.stringify(style));                                                 
          }
          catch(err)
          {
            alert(err);
          }
    }, 200);   
        });   
        }
        catch(err)
        {
          alert(err);
        }
        
  }

Angular HTML-Template:

<style>
<!--

#sumup-card {
  width: 640px;
  height: 0px;
  /* border: 1px solid #000000; */
}

//-->
</style>

<div id="sumup-card" class="sumup-card-class"></div>
<router-outlet></router-outlet>

 

[ruutaiokwu]

Also: Beide Varianten können die CSS-Attribute auslesen, aber nix schreiben / setzen.

Es spielt also keine Rolle, die man den DOM ausliest:

- getElementById(...)
- getElementsByClassName(...)[0]
- ...ein`name`-Attrbut kann ich bei DIVs nicht setzen, wie es mit der Parser von Eclipse anzeigt. (Kenne ich auch eher von den Elementen der <input ...>-Familie)

 

[thecain]

Ich denke @Thallius hat eher gemeint nur die Klasse zu ändern, nicht via Klasse zuzugreifen.

 

[ruutaiokwu]

Klar, Klasse (=ext. CSS), lokales CSS (=style-Tag) oder inline-CSS gehen problemlos. Allerdings möchte ich den Border mit ein paar ms. Verzögerung und deshalb der JS setzen, weil es sonst bei Laden der Seite zu einer relativ schrägen "Animation" kommt. (Ein oben Anliegender Strich mit 2px, welcher innerhalb von ein paar ms. zum Viereck mit border left, right, top, bottom 1px wird - es dauert halt ne Zeit, bis das geladen ist was geladen werden sollte -> Konkret geht's ums "SumUp Card Wdiget", um welches ich einen Border haben will. Allerdings ohne die "Animation"! ;-))