CSS und JavaScript – gemeinsam sind sie stark
Christian Heilmann zeigt wie man die Stärken von JavaScript und CSS kombinieren kann, statt um jeden Preis CSS-only Lösungen zu suchen.
In JavaScript ist es (…) mit einem kleinen Trick ganz einfach möglich zu überprüfen, ob ein Style Sheet geladen wurde. Der Trick ist, die Höhe oder Breite eines Elementes (…) zu definieren:
#ichkannCSS { height:20px; }Dann überprüft man in JavaScript, ob die offsetHeight beziehungsweise offsetWidth des Elementes den gleichen Wert hat:
var CSStestDingen = document.getElementById(‘ichkannCSS’);
if ( CSStestDingen !== undefined ) {
if ( CSStestDingen.offsetHeight === 20 ) {
// hier wird CSS gekonnt!
} else {
// der kann fei kei CSS ned.
}
}
Unterschiedliche Styles für JavaScript- und nicht-JavaScript-Versionen lassen sich leicht mit einer css Klasse auf dem body Element realisieren.
window.onload = function(){var klasse = document.body.className ? ‘ dynamisch’ : ’dynamisch’;
document.body.className = klasse;
}