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

Eigenschaften von CSS Klassen Attributen mit JavaScript auslesen

NetAktiv

Senior HTML'ler
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>
 
Werbung:
Werbung:
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>
 
Aber wie du das willst geht das auch

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.
 
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:
Werbung:
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
 
Zurück
Oben