JS+CSS-Problem bei der Darstellung von Elementen

[Gunnar Bittersmann]

Hello out there!

function changeVisibility(id) {
if (document.getElementById) {
  if (document.getElementById(id).style.display == "none") {
   document.getElementById(id).style.display = "block";
  } else {
   document.getElementById(id).style.display = "none";
  }
}
}

Du suchst unnötig oft über das DOM immer wieder dasselbe Element. Effizienter ist das Script, wenn du dir das Objekt in einer Variablen merkst:

function changeVisibility(id) {  
  var el = document.getElementById(id);  
  if (el) {  
    if (el.style.display == "none")  
      el.style.display = "block";  
    else  
      el.style.display = "none";  
  }  
}

Wenn du nur die Anzeige eines Elements ändern willst, kommt die Zuweisung an die Variable el außerhalb der Funktion. Dann bietet es sich auch an, sich den Status zu merken; das macht die Abfrage einfacher:

var el = document.getElementById(id);  
var visible = false;  
  
function changeVisibility() {  
  if (el) {  
    if (visible)  
      el.style.display = "none";  
    else  
      el.style.display = "block";  
    visible = !visible;  
  }  
}

oder kürzer:

var el = document.getElementById(id);  
var visible = false;  
  
function changeVisibility() {  
  if (el) {  
    el.style.display = (visible ? "none" : "block");  
    visible = !visible;  
  }  
}

<a href="#" onclick="changeVisibility('id');">

Warum ein Anker, der zu keinem sinnvollen Ziel führt? Du willst keine andere Ressource verlinken, sondern eine Aktion auf einer Seite ausführen, dafür sind Buttons besser:

<button onclick="changeVisibility('id_a');"> ... </button>

Ich möchte die CSS-Angabe >>style="display: none"<< in eine externe CSS-Datei auslagern.
.bla {
display: none;
}

Dann möchtest du also in deiner Funktion auch nicht die display-Eigenschaft des Elements ändern, sondern die Klassenzugehörigkeit:

el.className = "bla";;

bzw.

el.className = "";;

Und wenn du das JavaScript auch noch auslagern willst:

<button id="changeVisibility"> ... </button>

window.onload = function() {  
  document.getElementById("changeVisibility").onclick = function() {  
    changeVisibility();  
  };  
};

See ya up the road,
Gunnar