Clemens: CSS mit Javascript setzen.

SELF-Forum

CSS mit Javascript setzen.

Clemens Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Community,
ich habe etwas bemerkenswertes entdeckt. Für Schulungszwecke wollte ich das float-Verhalten von DIV-Containern visualisieren. Dazu erstellte ich drei DIV-Container mit unterschiedlichen Farben und fügte über Javascript die Möglichkeit hinzu die float-Eigenschaft der Container zu verändern.
Meines erachtens ist mein Script wasserdicht, IE7 ignoriert es jedoch, Firefox reagiert teilweise absurd und nur Opera stellt es genauso dar, wie beabsichtigt.

Hier die HTML, oder obigen Link:

<html>
 <head>
  <title>CSS-Übung</title>
  <!-- CSS -->
  <style type="text/css">
   body {
    background-color:#FFFFFF;
    color:#000000;
   }
   a {
    color:#000000;
   }
   #block1 {
    background-color:#FF0000;
    width:400px;
    height:20%;
    text-align:center;
    display:block;

}

#block2 {
    background-color:#00FF00;
    width:400px;
    height:20%;
    text-align:center;
    display:block;
   }

#block3 {
    background-color:#0000FF;
    width:400px;
    height:20%;
    text-align:center;
    display:block;
   }
   </style>
  <!-- JavaScript -->
  <script language="javascript" type="text/javascript">
  function changefloat(block,fluss) {
   divblock=document.getElementById("block"+block);
   divblock.style.cssFloat=fluss;
   textimblock=document.getElementById("t"+block);
   textimblock.innerHTML=fluss;
  }
  </script>
 </head>
<body>
<h1>Positionierung von DIV-Boxen</h1>
<h2>Fluss (float) von Objekten</h2>

<div id="block1">
 <a href="javascript:changefloat(1,'none');">Float:none</a>|
 <a href="javascript:changefloat(1,'left');">Float:left</a>|
 <a href="javascript:changefloat(1,'right');">Float:right</a></br>
 <h1 id="t1">none</h1>
</div>
<div id="block2">
 <a href="javascript:changefloat(2,'none');">Float:none</a>|
 <a href="javascript:changefloat(2,'left');">Float:left</a>|
 <a href="javascript:changefloat(2,'right');">Float:right</a>
 <h1 id="t2">none</h1>
</div>
<div id="block3">
 <a href="javascript:changefloat(3,'none');">Float:none</a>|
 <a href="javascript:changefloat(3,'left');">Float:left</a>|
 <a href="javascript:changefloat(3,'right');">Float:right</a>
 <h1 id="t3">none</h1>
</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS mit Javascript setzen.

    Detlef G.
    +2 Informationen zu den Bewertungsregeln

    Hallo Clemens,

    ich habe etwas bemerkenswertes entdeckt. Für Schulungszwecke wollte ich das float-Verhalten von DIV-Containern visualisieren. Dazu erstellte ich drei DIV-Container mit unterschiedlichen Farben und fügte über Javascript die Möglichkeit hinzu die float-Eigenschaft der Container zu verändern.

    Gut wäre es gewesen, wenn du dem Dokument auch eine passende DTD spendiert hättest.

    Meines erachtens ist mein Script wasserdicht, IE7 ignoriert es jedoch, …

    Vielleicht kann auch der IE7 noch nichts mit cssFloat anfangen und besteht stattdessen wie seine Vorgänger auf styleFloat.

    … Firefox reagiert teilweise absurd …

    Mein Firefox verhält sich genauso, wie ich es erwartet hätte.
    Beachte:
    Die Position von Blockelementen, die sich im normalen Elementfluss befinden, wird durch gefloatete Elemente nicht beeinflusst, nur ihr Inlineinhalt umfließt das gefloatete Element.
    Weil du eine Höhe für die Divs angegeben hast, können sie sich nicht vergrößern und durch  overflow:visible (Standardwert) wird der Inhalt trotzdem (aber eben außerhalb) angezeigt.

    … und nur Opera stellt es genauso dar, wie beabsichtigt.

    Er kennt cssFlot, ahmt aufgrund der fehlenden DTD aber wohl die Fehler des IE nach. (hasLayout)

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln