Przeciwna wartość

Cześć,

napisałem sobie banalny kod w js:
document.getElementById( "dark" ).style.visibility = 'visible';

i to działa, jednak gdy napiszę:
document.getElementById( "dark" ).style.visibility = !document.getElementById( "dark" ).style.visibility;

to nie działa, dlaczego?

i tak przy okazji dlaczego gdy zrobię:
alert( document.getElementById( "dark" ).style.visibility )

to mam puste okienko zamiast wartości true/false? (próbowałem też document.getElementById( "dark" ).style.visibility.value, ale wtedy mam "undefined")

Pozdrawiam i dzięki za pomoc.

bo ten atrybut nie ma wartości "true" / "false" tylko "visible" / "hidden" (może być jeszcze "collapse" / "inherit" lub pusta - przy czym pusta wartość znaczy tyle co domyślne "visible")
alert jest pusty bo domyślnie właśnie ten atrybut nic nie zawiera

żeby go przełączyć możesz zrobić coś w tym stylu:

var dark = document.getElementById( "dark" );
dark.style.visibility = dark.style.visibility === 'hidden' ? 'visible' : 'hidden';

ale to co powinieneś zrobić to zdefiniować dwie klasy w css i tylko je przełączać przez javascript nie odwołując się do "element.style"