Ergebnis 1 bis 3 von 3
  1. #1
    Flynx ist offline Grünschnabel
    registriert
    09-02-2011
    Beiträge
    2

    Question innerHTML und der IE

    Hallo zusammen!

    Ich habe nun eine ganze Weile gesucht, aber keine Antwort gefunden. Vielleicht wisst ihr ja Rat?

    An einer Stelle im Html-body will ich einen auf Wunsch aufklappbaren Zusatztext platzieren, das klappt auch alles wunderbar, aber wenn der Text wieder ausgeblendet wird, dann ist im IExplorer 7 plötzlich das Layout verrutscht: Es sieht so aus, als ob eine Leerzeile hinzugekommen wäre. Tatsächlich scheint es aber nur der Abstand zwischen Absätzen zu sein. Habe ich einen Fehler im Code? Ich versuch mal die relevanten Teile herauszufiltern:

    Code:
    <div id="schalter_text">
     <font face="Courier New" size="2">
      <a style="text-decoration:none;" onclick="showText(1)">
        Details anzeigen
      </a>
     </font>
    </div>
    <div>
      <span id="Inhalt_1">
      </span>
    </div>
    Ich erzeuge also einen Link, der die Funktion showText(1) aufruft. Diese wiederum sieht etwa so aus:

    Code:
    var text="<font size=\"2\" face=\"Courier New\">Beispieltext ...<\/font>";
    var schaltertext = "<font size=\"2\" face=\"Courier New\"><a  style=\"text-decoration:none;\" onclick=\"showText(1);\">verbergen<\/a><\/font>";
    ..
    // ... (die objekte werden mittels document.getElementById identifiziert)
    ..
    schalter_objekt.innerHTML = schaltertext;
    text_objekt.innerHTML = text;
    Der Text des "Schalter"-Links wird somit geändert und die zuvor leere Span wird mit dem Text gefüllt.

    Ich hoffe, dass ich beim Quoten bzw. Abtippen hier keine Fehler gemacht habe, auf jeden Fall funkioniert alles.

    Betätigt der User nun als nächstes den veränderten Link um den Text wieder auszublenden, dann macht die Funktion showText ein bisschen was anderes, nämlich

    Code:
    var text="";
    var schaltertext = "<font size=\"2\" face=\"Courier New\"><a  style=\"text-decoration:none;\" onclick=\"showText(1);\">Details anzeigen<\/a><\/font>";
    .. und weiter wie oben

    Der Link-Text wird wieder auf den ursprünglichen Text gesetzt und der Inhalt (innerHTML) der Span wird mit der leeren Zeichenkette gefüllt.

    Auch das funktioniert, aber der IE (und nur der) baut nun einen Absatzabstand zwischen dem Link und der leeren Zeile ein. Warum?

    Grüße,
    Flynx

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.732

    AW: innerHTML und der IE

    Dein gesamtes Funktionskonstrukt ist nicht gut (um die genaue Ursache des Problems herauszufinden müssten wir einen Testlink sehen). Das würde ich ganz anders machen:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript">
    function details(node, type){
    	var opp = (type == "show")? "hide": "show";
    	var div = node.getElementsByTagName("div");
    	for (var i = 0; i < div.length; i++){
    		if (div[i].className == opp + "Details"){
    			div[i].style.display = "block";
    		}
    		if (div[i].className == type + "Details"){
    			div[i].style.display = "none";
    		}
    		if (div[i].className == "text"){
    			div[i].style.display = (type == "show")? "block": "none";
    		}
    	}
    }
    window.onload = function(){
    	var div = document.getElementsByTagName("div");
    	for (var i = 0; i < div.length; i++){
    		switch (div[i].className){
    			case "showDetails":
    				div[i].onclick = function(){
    					details(this.parentNode, "show");
    				};
    				break;
    			case "hideDetails":
    				div[i].onclick = function(){
    					details(this.parentNode, "hide");
    				};
    				break;
    		}
    	}
    }
    </script>
    <style type="text/css">
    .text {
    	display: none;
    }
    .showDetails, .hideDetails {
    	cursor: pointer;
    }
    .hideDetails {
    	display: none;
    }
    </style>
    </head>
    <body>
    <div>
    	<div class="showDetails">Details anzeigen</div>
    	<div class="hideDetails">Details verbergen</div>
    	<div class="text">
    		Beispieltext....
    	</div>
    </div>
    </body>
    </html>
    - mal auf die Schnelle (ist noch nicht optimal...).

    PS: Style-Tags sind nicht besonders... das macht man mit CSS (Trennung zwischen Inhalt und Darstellung)

  3. #3
    Flynx ist offline Grünschnabel
    registriert
    09-02-2011
    Beiträge
    2

    AW: innerHTML und der IE

    Hallo,

    Deine Lösung sieht eleganter aus, muss noch mal hinschauen, was Du da eigentlich machst. :-)

    Hab gerade erst angefangen eine Webseite zu erschaffen und bin relativ schnell auf die Begrenzungen von HTML gestossen, daher habe ich dann in JS Rettung gesucht - mehr schlecht als recht vielleicht (auch darin habe ich bislang praktisch keine Erfahrung), aber immerhin hat es gemacht was es sollte, bis auf den Schönheitsfehler bei einem Browser. Leider kann ich auch noch keinen Testlink anbieten, zur Zeit ist das noch lokal. Vielleicht am Wochenende, dann füge ich den Link hier noch ein.
    Danke für die Alternative auf jeden Fall!

    Gruß,
    Flynx

Ähnliche Themen

  1. innerHTML und php
    Von level0031 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 10-02-2010, 07:58
  2. innerHTML
    Von Flubber im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 10-08-2009, 23:45
  3. Value und innerHTML
    Von Speedy19102000 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 25-04-2009, 17:54
  4. innerHTML
    Von drimascus im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 09-08-2006, 10:46
  5. innerHTML und div
    Von BenBay im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 25-02-2006, 11:49

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •