Entscheidungsstrukturen in JavaScript unter Firefox 49

Ausrichtung von Flächen mit JavaScript

Das folgende Programm richtet zwei Flächen eines Formulars so aus, daß beide gleich breit sind. Dazu wird die Fläche mit der kleineren Breite auf die Breite der Fläche mit der größeren Breite vergrößert. Hierfür werden die verzeichniswertigen Funktionen »getBoundingClientRect«, verwendet, die ein Verzeichnis mit Angaben zur Größe eines Elementes liefern. Aus diesem Verzeichnis wird dann der Eintrag »width« ausgewählt, um die Breite zu erhalten.

Falls die Breite des Rechtecks »report« kleiner als die Breite des Rechtecks »button« ist, wird sie auf die Breite des Rechtecks »button« vergrößert, sonst wird die Breite des Rechtecks »button« geprüft: Ist sie kleiner als die Breite des Rechtecks »report«, so wird sie auf die Breite des Rechtecks »report« vergrößert.

Die folgende Webseite wurde 2020 nicht mehr in Firefox, aber in Chrome wie beabsichtigt dargestellt.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<form action="http://www.invalid">
  <p><input type="text"   id="report" value="0"               /></p>
  <p><input type="button" id="button" value="Inkrementieren!" /></p>
</form>
<pre><code><script>/*<![CDATA[*/
"use strict";
{ const report      = window.document.getElementById( "report" );
  const button      = window.document.getElementById( "button" );
  const reportWidth = report.getBoundingClientRect().width;
  const buttonWidth = button.getBoundingClientRect().width;
  if( reportWidth < buttonWidth )
  report.style.width = buttonWidth + "px"; 
  else if( buttonWidth < reportWidth )
  button.style.width = reportWidth + "px"; }
/*]]>*/</script></code></pre></body></html>

Eine Ausrichtung der oben gezeigten Art ist mit CSS vermutlich derzeit nicht möglich.

ℛ Stilregel Falls etwas sowohl mit CSS als auch mit JavaScript erledigt werden kann, sollte CSS bevorzugt werden, falls es sonst keine erheblichen Nachteil hat. Um das beurteilen zu können, muß ein JavaScript -Programmierer auch gute Kenntnisse der aktuellen CSS -Version besitzen.

Die Formatierung mit JavaScript ist nur möglich, wenn JavaScript auch im Browser aktiviert ist. CSS ist vielleicht noch häufiger aktiviert als JavaScript.