molily: <!DOCTYPE html> beeinflusst Javascript Styling

Beitrag lesen

Hallo,

Mein Problem tritt ein, wenn man oben am html file die <!DOCTYPE html> deklaration einfügt.

Die Angabe eines vollständigen DOCTYPEs bzw. des HTML5-DOCTYPEs <!DOCTYPE html> löst den standardkonformen Modus des Browsers aus. In diesem Modus wird das Dokument gemäß den Webstandard verarbeitet. Wenn man Fehler macht, verzeiht sie einem der Browser weniger. Der standardkonforme Modus ist hilfreich, weil er einen auf Fehler hinweist. Wenn etwas nicht (mehr) funktioniert, dann hat man i.d.R. etwas falsch gemacht.

Siehe auch:
http://webkompetenz.wikidot.com/html-handbuch:quirks-standards-modus
http://carsten-protsch.de/zwischennetz/doctype/einleitung.html

Mittlerweile wird dann kein JavaScript-Styling mehr zugelassen.

Doch, aber man muss korrekte Werte für CSS-Eigenschaften angeben.

if(document.layers) {
   window.captureEvents(Event.MOUSEMOVE);
   window.onmousemove = koordinaten;
   }
   else {
      document.onmousemove = koordinaten;
   }

Dieser Code ist über 10 Jahre alt. Er ist für Netscape 4 und Internet Explorer 4 geschrieben, welche 1997/1998 veröffentlicht wurden. Heute kann man das viel einfacher schreiben und sich den Teil für Netscape komplett sparen.

function koordinaten(e) {
   xpos = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft + event.clientX;
   ypos = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop + event.clientY;

Das ist auch eine Browserabfrage für 90er-Jahre-Browser, die man durch eine gezielte Featureabfrage ersetzen kann.

Hier reicht:
xpos = e.pageX != null ? e.pageX : event.clientX + document.documentElement.scrollLeft;
ypos = e.pageY != null ? e.pageY : event.clientY + document.documentElement.scrollTop;

Alle neueren Browser kennen pageX/Y, die anderen sind ältere IEs (IE < 9), welche clientX/Y und scrollLeft/scrollTop kennen (im standardkonformen Modus auf dem html-Element, daher document.documentElement anstatt document.body).

window.status = txt;

Übrigens: Neuere Browser erlauben das Setzen der Statusleiste nicht mehr. Vor zehn Jahren war das noch möglich.

setInterval(function (){box.style.marginLeft = (-xpos);},1);

Hier wird eine einheitlose Zahl (z.B. -123) als margin-left-Wert gesetzt. Der Wert muss jedoch eine Einheit haben, in diesem Fall »px«.

box.style.marginLeft = (-xpos) + "px";

Ergibt dann einen String mit beispielsweise "-123px", und das ist ein gültiger Wert für margin-left.

Grüße,
Mathias