display:none; in css

Ich hab da ne function:

function toggleDisplayById(element){
   var el = document.getElementById(element);
   (el.style.display == 'none')
   ? el.style.display = ''
   : el.style.display = 'none';
}

In HTML hab ich ein div mit id="soundso".
Per CSS sag ich dann: #soundso{display:none;}

Dazu ein button der die function startet. Aber da passiert nix. Allerdings - wenn ich direkt in HTML dem div ein style="display:none;" gebe, dann klapt das.

Gibts da nen Unterschied den ich noch nicht mitbekommen hab?

Achja - bei Zuweisung per CSS (display:none;) und einem test-Alert(el.style.dislpay) bekomme ich ''(null, nix) oO?
Was is da los?

Oh man. Dann müsste ich zusätzlich Abfragen, ob kein display gesetzt ist, oder?
Sowas wie

function toggleDisplayById(element){
   var el = document.getElementById(element);
   (el.style.display == 'none' || el.style.display == '')
   ? el.style.display = ''
   : el.style.display = 'none';
}

Aber des geht nicht =(

Zitat

Uncaught exception: DOMException: INDEX_SIZE_ERR
Error thrown at line 65, column 1 in insertButton(event) in script.js:
var offset = range.getBoundingClientRect();