removeAttribute in Safari - geht nicht

[nam]

Hi

In einem JavaScript muss ich Elemente vorübergehend unsichtbar machen. Das mache ich mit

  
var el=document.getElementById('test');  
el.style.visibility='hidden';  

Danach wird das Element wieder sichtbar und ich will das style-Attribute (das mit obigem Code eingefügt wurde) wieder aus dem DOM entfernen:

  
el.removeAttribute('style');  

Funktioniert tiptop in Firefox 3 und Opera 9, Safari tut aber gar nichts.

Vereinfachte Version des Problems:
http://mnn.ch/diversa/remAttrTest.html

Kann ich das auch richtig machen?

[Struppi]

Danach wird das Element wieder sichtbar und ich will das style-Attribute (das mit obigem Code eingefügt wurde) wieder aus dem DOM entfernen:

el.removeAttribute('style');

  
Wieso willst dud as Style Objekt entfernen?  
  

> Kann ich das auch richtig machen?  
  
Ja, in dem du die Eigenschaft überschreibst.  
  
Struppi.

[nam]

Hallo Struppi

Danke für deine Antwort.

Wieso willst dud as Style Objekt entfernen?

Um den Fussabdruck im DOM möglichst klein zu halten.

»» Kann ich das auch richtig machen?
Ja, in dem du die Eigenschaft überschreibst.

Es geht mir ja nicht um die Änderung der Eigenschaft, sondern um das Entfernen des Style-Attributs im obigen Fall. Das krieg ich aber nicht hin im Safari.

Gruss,
Mathias

[Struppi]

» Wieso willst dud as Style Objekt entfernen?
Um den Fussabdruck im DOM möglichst klein zu halten.

Welcher Fußabdruck?

» »» Kann ich das auch richtig machen?
» Ja, in dem du die Eigenschaft überschreibst.
Es geht mir ja nicht um die Änderung der Eigenschaft, sondern um das Entfernen des Style-Attributs im obigen Fall. Das krieg ich aber nicht hin im Safari.

Ein HMTL Objekt hat immer ein style Attribut, das kannst du nicht entfernen. Das was du entfernst ist das HTML Attribut, nicht das JS Objekt (was auch gar nicht geht) offensichtlich ist der Safari da etwas genauer.

Struppi.

[nam]

»»Das was du entfernst ist das HTML Attribut

Na meinetwegen HTML-Attribut, aber ich entferne es ja eben nicht (kann nicht), jedenfalls nicht in Safari.

[Struppi]

»»Das was du entfernst ist das HTML Attribut

Na meinetwegen HTML-Attribut, aber ich entferne es ja eben nicht (kann nicht), jedenfalls nicht in Safari.

Aber du hast nie ein HTML Attribut gesetzt.

Struppi.

[molily]

Danach wird das Element wieder sichtbar und ich will das style-Attribute (das mit obigem Code eingefügt wurde) wieder aus dem DOM entfernen:

el.removeAttribute('style');

  
Das style-Objekt ist eine DOM-Schnittstelle zu den Inline-Styles. Es hat mit dem \*Attribut\* style erst einmal nichts zu tun. Natürlich interagieren sie miteinander: Wenn du das style-Attribut im HTML oder JS setzt, wirst du die entsprechenden Eigenschaften auch unter elementobjekt.style.eigenschaft wiederfinden. Wenn du das style-Objekt verwendest, dann wird aber möglicherweise nicht das style-Attribut aktualisiert (Vermutung, nicht ausprobiert - dafür wäre .style.cssText gedacht).  
  
Wenn du das Element wieder sichtbar machen willst, nutze el.style.visibility = "";  
  
Möglich wäre auch .style.removeProperty("visibility"), aber das ist wenige breit unterstützt.  
  
Mathias

-- 
[JavaScript-Erweiterung für das SELFHTML-Forum](http://forum.de.selfhtml.org/js/doku/)

[nam]

Hallo Mathias

Auch dir danke ich für die Antwort.

Wenn du das style-Objekt verwendest, dann wird aber möglicherweise nicht das style-Attribut aktualisiert

Doch genau dies ist der Fall (sowohl in Safari, als auch in Firefox). Es wird im DOM ein style-Attribut eingefügt; und dieses will ich danach wieder weg haben...

Möglich wäre auch .style.removeProperty("visibility"), aber das ist wenige breit unterstützt.

Das entfernt nur visibility, nicht aber das ganze Attribut, deshalb will ich ja removeAttribut einsetzen.

Gruss,
nam

[ChrisB]

Hi,

Wenn du das style-Objekt verwendest, dann wird aber möglicherweise nicht das style-Attribut aktualisiert

Doch genau dies ist der Fall (sowohl in Safari, als auch in Firefox). Es wird im DOM ein style-Attribut eingefügt;

Das schliesst du vermutlich aus einer Darstellung per innerHTML oder aus einer sonstigen Anzeige eines DOM-Baumes?

und dieses will ich danach wieder weg haben...

Das, was du da beobachtest, wäre erst mal nur eine(!) mögliche Repräsentation des abstrakten Konstruktes "DOM" in visueller Form. Dass die Browser das intern auch 1:1 so umsetzt haben, kannst du daraus m.E. nicht schliessen.

Möglich wäre auch .style.removeProperty("visibility"), aber das ist wenige breit unterstützt.

Das entfernt nur visibility, nicht aber das ganze Attribut, deshalb will ich ja removeAttribut einsetzen.

Vergiss es, das ist sinnlos ...

Ein HTMLElementObjekt im Speicher des Browser hat sowieso in irgendeiner Form eine im speicher liegende Repräsentation des kompletten style-Objektes vorliegen - schliesslich hat jedes Element zu jeder Zeit *alle* CSS-Eigenschaften, nur mit unterschiedlichen Werten (teilweise Defaultwerten).
Da jetzt visibitlity wirklich "entfernen" zu wollen, dürfte dir von der Performance deines Scriptes im Browser her absolut keinen Vorteil bringen.

MfG ChrisB

[nam]

Hi

Das schliesst du vermutlich aus […] aus einer sonstigen Anzeige eines DOM-Baumes?

Ja, in den Webdeveloper-Tools in Safari, bzw. in Firebug in Firefox. Und das darf ich wohl - zumindest die Webdeveloper-Tools sind mit JavaScript geschrieben und bilden das DOM also so ab, wie es JavaScript sieht.

Das, was du da beobachtest, wäre erst mal nur eine(!) mögliche Repräsentation des abstrakten Konstruktes "DOM" in visueller Form. Dass die Browser das intern auch 1:1 so umsetzt haben, kannst du daraus m.E. nicht schliessen.

Warum nicht?
Das ist ja genau das Problem, dass jemand, der mein Script verwendet in der DOM-Ansicht dann überall diese style-Attribute drin hat, die ich da nicht will.

Ein HTMLElementObjekt im Speicher des Browser hat sowieso in irgendeiner Form eine im speicher liegende Repräsentation des kompletten style-Objektes vorliegen - schliesslich hat jedes Element zu jeder Zeit *alle* CSS-Eigenschaften, nur mit unterschiedlichen Werten (teilweise Defaultwerten).

Ist mir absolut klar. Es geht aber nicht um das Style-Objekt, sondern ums Attribut im DOM!

Da jetzt visibitlity wirklich "entfernen" zu wollen, dürfte dir von der Performance deines Scriptes im Browser her absolut keinen Vorteil bringen.

Es geht mir nicht um Performance und ich will auch nicht visibility entfernen! Es geht mir um die Spuren (Fussabdrücke), die mein Script im DOM hinterlässt (und die nicht nötig wären), sprich die style-Attribute die in der DOM-Ansicht zu sehen sind. Reiner Purismus, nix Pragmatismus!

Dazu kommt, dass es in Firefox und Opera so funktioniert, wie ich das erwarte, nicht aber in Safari.

Hach!

[molily]

// DOM 2 Events #1 (Gecko, Presto, Webkit, nicht IE)  
e.setAttribute("style", "");  
  
// DOM 2 Events #2 (Gecko, Presto, Webkit, nicht IE)  
var s = e.style;  
while (s.length) {  
	s.removeProperty(s.item(0));  
}  
  
// DOM 2 Events #3 (Gecko, Presto, Webkit, IE)  
e.style.cssText = "";

[molily]

Diese Testergebnisse gelten sowohl für den Fall style-Attribut im HTML als auch mit JavaScript über el.style.eigenschaft gesetzte Formatierungen.

[molily]

Funktioniert tiptop in Firefox 3 und Opera 9, Safari tut aber gar nichts.

Funktioniert bei mir im Safari 4 Beta.
Formatierungen werden aufgehoben und das Attribut gelöscht (nicht mehr im Web Inspector sichtbar).

Mathias

[molily]

Funktioniert bei mir im Safari 4 Beta.

Oops, das bezieht sich nicht auf deinen Testcase, sondern auf meinen, wo ich mit einem style-Attribut im HTML gearbeitet habe.

Wenn die Zuweisung über das style-Objekt erfolgt, dann gehts nicht mit removeAttribute im Safari 4.

Mathias

[nam]

Oops, das bezieht sich nicht auf deinen Testcase, sondern auf meinen, wo ich mit einem style-Attribut im HTML gearbeitet habe.

Deshalb machte ich ja einen Testcase!

Wenn die Zuweisung über das style-Objekt erfolgt, dann gehts nicht mit removeAttribute im Safari 4.

Na endlich! Sag ich ja!
Übrigens versagt bei deinem Testcase der Firefox.

[molily]

Übrigens versagt bei deinem Testcase der Firefox.

Bei welchem Testcase mit welcher Methode und welche Firefox-Version?

Mathias

[nam]

Bei welchem Testcase

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
    "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <title>removeAttribute-Testcase</title>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
        <script type="text/javascript">  
        window.onload=function(){  
        	var e=document.getElementById('test');  
        	e.style.visibility='hidden';  
        	e.removeAttribute('style');  
  
			// DOM 2 Events #1 (Gecko, Presto, Webkit, nicht IE)  
			//e.setAttribute("style", "");  
	  
			// DOM 2 Events #2 (Gecko, Presto, Webkit, nicht IE)  
			/*var s = e.style;  
			while (s.length) {  
			        s.removeProperty(s.item(0));  
			}*/  
			  
			// DOM 2 Events #3 (Gecko, Presto, Webkit, IE)  
			//e.style.cssText = "";  
        }  
        </script>  
    </head>  
    <body>  
    	<p>There should be a 'Hello World!':</p>  
        <div id="test">Hello World!</div>  
    </body>  
</html>  

natürlich entsprechend (aus)kommentiert.

»»mit welcher Methode
Alle drei. Nur mit der removeAttribute-Methode ist das Style-Attribute in der DOM-Ansicht (Firebug) weg.

»»und welche Firefox-Version?
3.0.7

[molily]

Nur mit der removeAttribute-Methode ist das Style-Attribute in der DOM-Ansicht (Firebug) weg.

Ja, das ist klar. Die drei besagten Methoden tun das, was removeAttribute nicht browserübergreifend tut: Sie entfernen alle Eigenschaften, die du beim style-Objekt gesetzt hast.
Das style-Attribut ist dann gesetzt, aber leer (zu sehen in Firefox Firebug, Opera Dragonfly und Safari Web Inspector - in der IE Developer Toolbar wird es nicht angezeigt).
Wenn du es entfernen willst, musst du natürlich *zusätzlich* removeAttribute verwenden.
Beides zusammen sollte aber den Effekt haben, um den es dir geht (falls ich dich richtig verstanden habe).

Mathias

[nam]

Beides zusammen sollte aber den Effekt haben, um den es dir geht (falls ich dich richtig verstanden habe).

Ja! Das klappt!
http://mnn.ch/diversa/remAttrTest_solved.html

Danke dir, Mathias (molily)!
Gruss,
Mathias (nam)

PS: Aber das removeAttribute nur funktioniert, wenn das Attribut leer ist, ist schon ein bisschen seltsam. Wäre das ein Bugreport wert?

[molily]

Aber das removeAttribute nur funktioniert, wenn das Attribut leer ist, ist schon ein bisschen seltsam. Wäre das ein Bugreport wert?

Irgendwie hast du immer noch nicht den Unterschied verstanden, den wir dir die ganze Zeit zu verklicken versuchen.

removeAttribute funktioniert wunderbar im Safari, wenn das Attribut gefüllt ist - als Attribut im HTML oder setAttribute. Aber wie Struppi sagt: Du füllst das Attribut nicht direkt, sondern der Browser macht es indirekt, weil du das style-Objekt benutzt. Wie gesagt existiert die Verbindung style-Objekt <> style-Attribut nicht in jeder Hinsicht in beide Richtungen.

Mathias

[nam]

Irgendwie hast du immer noch nicht den Unterschied verstanden, den wir dir die ganze Zeit zu verklicken versuchen.

Da hast du wohl recht. Jedenfalls bin ich jetzt erst einmal zufrieden, dass ich machen kann, was ich wollte. Jetzt brauche ich Schlaf und werde das Weshalb und Warum morgen mit frischeren kognitiven Fähigkeiten rekapitulieren.

Merci et bonne nuit.

[Kai345]

[latex]Mae  govannen![/latex]

In einem JavaScript muss ich Elemente vorübergehend unsichtbar machen. Das mache ich mit

var el=document.getElementById('test');
el.style.visibility='hidden';

>   
> Danach wird das Element wieder sichtbar und ich will das style-Attribute (das mit obigem Code eingefügt wurde) wieder aus dem DOM entfernen:  
> ~~~javascript
  

> el.removeAttribute('style');  
> 

Ich würde das ganze Problem auf CSS verlagern und per JS nur einen Klassennamen hinzufügen/entfernen

#test {  
  visibility: visible;  
}  
#test.unsichtbar {  
  visibility: hidden;  
}

var el=document.getElementById('test');  
el.className += " unsichtbar";

el.className = el.className.replace(#(^|\s)unsichtbar($|\s)#gi, '')

Cü,

Kai

[nam]

Ich würde das ganze Problem auf CSS verlagern und per JS nur einen Klassennamen hinzufügen/entfernen

Das ist zweifelsfrei die eleganteste und auch performanteste Lösung. Passt aber in meinem speziellen Fall leider nicht.

Trotzdem Danke

[molily]

el.className = el.className.replace(#(^|\s)unsichtbar($|\s)#gi, '')

/Dies ist ein RegExp-Literal in JavaScript/gi
#Dies ist ein Syntaxfehler in JavaScript#gi ;-)

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

el.className = el.className.replace(#(^|\s)unsichtbar($|\s)#gi, '')

/Dies ist ein RegExp-Literal in JavaScript/gi
#Dies ist ein Syntaxfehler in JavaScript#gi ;-)

Hmmm ..Mag sein daß die Delimiter (zumindest offiziell, hab gerade keine Lust+Zeit, mich diesbezüglich einzulesen)in JS begrenzt sind, allerdings haben Tests mit IE5.5, IE6, Opera 9.64, FF1.5, FF3.0.7,Safari3  weder Fehler noch Warnung angezeigt und der Test-String wurde auch ordnungsgemäß beschnitten.

Cü,

Kai

[molily]

Mag sein daß die Delimiter (zumindest offiziell, hab gerade keine Lust+Zeit, mich diesbezüglich einzulesen)in JS begrenzt sind

Es gibt keine »Delimiter« in JavaScript, so etwas gibt es nur in Sprachen, in denen man einen regulären Ausdruck zusammen mit den Flags in einem String unterbringt. Das ist in ECMAScript nicht der Fall, es gibt nur RegExp-Literale und die sehen wie beschrieben aus.

allerdings haben Tests mit IE5.5, IE6, Opera 9.64, FF1.5, FF3.0.7,Safari3  weder Fehler noch Warnung angezeigt und der Test-String wurde auch ordnungsgemäß beschnitten.

Da musst du dich täuschen. Im IE 6, IE 7, Opera 9.64, Safari 4 und Firefox 3 wirft das einen Syntaxfehler.

Mathias

[Kai345]

[latex]Mae  govannen![/latex]

allerdings haben Tests mit IE5.5, IE6, Opera 9.64, FF1.5, FF3.0.7,Safari3  weder Fehler noch Warnung angezeigt und der Test-String wurde auch ordnungsgemäß beschnitten.

Da musst du dich täuschen. Im IE 6, IE 7, Opera 9.64, Safari 4 und Firefox 3 wirft das einen Syntaxfehler.

Ja, jetzt auch hier. Ich habe die falsche Datei verwendet.

Cü,

Kai