Eigenschaften von CSS Klassen Attributen mit JavaScript auslesen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
Ich will die Sichtbarkeit eines Elements togglen, indem ich den Display Style mittels JavaScript abfrage und dann zwischen den Werten '' (Leer) und none wechsele. Das klappt auch, wenn das Element mittels Style-Display Setting ausgeblendet wurde. Wurde es aber statt dessen über eine CSS-Klasse ausgeblendet, so komme ich an die Display Eigenschaft scheinbar nicht mehr heran. Ich nehme an, das ist ein generelles Problem, dass durch Klassen gesetzte Eigenschaften über JavaScript nicht direkt ausgelesen werden können.

HTML:
<script>
    function doit(){
      alert("1: " + document.getElementById("d1").style.display
            + "\n2:" + document.getElementById("d2").style.display );
    }
</script>
<style>
  .hide { display: none; }
</style>
<div id="d1" class="hide">Text 1</div>
<div id="d2" style="display:none">Text 2</div>
<button onclick="doit();">OK</button>
 

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
Für das get klappt es dann, aber das Überschreiben nicht, die Klasse behält die Oberhand über das JS element.style.display=''. Ich wollte halt ein Element, das über eine beliebige Klasse ausgeblendet wurde, wieder einblenden. Aber ich muss mich wohl für feste Klassen zum ein- und ausblenden entscheiden und die Klasse toggeln.
 

basti1012

Senior HTML'ler
26 November 2017
1.052
110
63
38
Minden
sebastian1012.bplaced.net
Mit toggle zu arbeiten oder und mit css ist wahrscheinlich sinnvoller.

Aber wie du das willst geht das auch


HTML:
<script>
function doit(){
  ele=document.querySelector('#d1');
   d1 = window.getComputedStyle(ele).display;
if(d1=='block'){
  ele.style.display='none';
}else{
    ele.style.display='block';
}
}
</script>
<style>
  .hide { display: none; }
</style>

<button onclick="doit();">OK</button>
<div id="d1" class="hide">Text 1</div>
 

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
Leider geht das nicht wirklich so einfach, weil man scheinbar das display-Attribut nicht löschen kann, um dem Element das display-Default zurück zu geben, wenn es durch eine CSS Klasse gesetzt wurde. Dein Vorschlag funktioniert für block-Elemente wie <div> und <p>, nicht aber für inline Elemente wie <span> und <a>. Wenn ich das über Klassen machen wollte, müsste ich das auch irgendwie berücksichtigen. So tendiere ich im Moment wieder dazu, die Sichtbarkeit durch die style-Anweisung im Element zu regeln.
 

basti1012

Senior HTML'ler
26 November 2017
1.052
110
63
38
Minden
sebastian1012.bplaced.net
Dein Vorschlag funktioniert für block-Elemente wie <div> und <p>, nicht aber für inline Elemente wie <span> und <a>.
Warum nicht ?

JavaScript:
<script>
function doit(){
    ele=document.querySelector('#d1');
    d1 = window.getComputedStyle(ele).display;
    if(d1=='inline-block'){
        ele.style.display='none';
    }else{
        ele.style.display='inline-block';
    }
}
</script>
<style>
  .hide { display: none; }
</style>
<button onclick="doit();">OK</button>
<span id="d1" class="hide">Text 1</span>
Ich glaube aber langsam das wir irgendwie einander vorbei reden , zumindest verstehe ich es wahrscheinlich nicht richtig.

Und style attributen kann man auch löschen wenn es sein muß

JavaScript:
<script>
function doit(){
    ele=document.querySelector('#d1');
    d1 = ele.hasAttribute('style');
    if(d1==true){
        ele.removeAttribute('style');
    }else{
       ele.setAttribute('style',"display:inline-block");
    }
}
</script>
<style>
  .hide { display: none; }
</style>
<button onclick="doit();">OK</button>
<span id="d1" class="hide">Text 1</span>
 
Zuletzt bearbeitet:

NetAktiv

Senior HTML'ler
23 April 2011
1.076
31
48
Freising bei München
Ich glaube aber langsam das wir irgendwie einander vorbei reden , zumindest verstehe ich es wahrscheinlich nicht richtig.
Ich versuche es nochmals. Wenn ein Element beim Laden der Seite nicht sichtbar ist, dann liefert die erste Display-Abfrage mittels getComputedStyle den Wert none. Dieses display:none beim Element kann zwei Ursachen haben eine class oder eine style mit dieser Anweisung. Und da kommt nun der wesentliche Unterschied:
War es ein style, dass löscht die Anweisung ele.style.display = '' den Wert none und die Default-Sichtbarkeit kommt wieder zum Tragen, ich muss mich nicht darum kümmern, ob es ein <div> oder <span> ist. War es dagegen eine class, dann bleibt die Anweisung ele.style.display = '' wirkungslos, die class sorgt dafür, dass das display:none wirksam bleibt. Um das zu verhindern, müsste man das display explizit setzen, und dazu muss ich wissen, auf was (block, inline, ..).

Sicher kann man das alles irgendwie noch hin bekommen, aber ich mache das ja nicht professionell und will nur bei meiner Homepage ein paar lange Texte ein- und ausklappen. Ich habe ja eine funktionierende Lösung und wollte nur wissen, wie ich denn die Sichtbarkeit heraus bekomme. Ich mache nur selten etwas an der Homepage und diese Funktiopn getComputedStyle hatte ich nicht auf dem Schirm. Nun vergesse ich sie hoffentlich nicht mehr. Danke
 
Werbung:

Latest posts