this?

[Fritz]

Hallo,

Ich möchte das folgende script allgemein halten, d.h. für mehrere ids verwenden:

<div id="menu1">
.
.
<script type="text/javascript">
if (document.getElementById){
  document.getElementById("menu1").style.display = "none";
}
</script>
.
.

Wenn ich dafür schreibe:

if (document.getElementById) {
  this.style.display = "none";
}

sollte dann nicht das <div> als this erkannt werden?
Ich krieg aber einen Scriptfehler:
this.style has no properties

Kann mir jemand weiterhelfen

Gruß Fritz

[H2O]

Hallo Fritz.

Du kannst es aber z.B. so machen:

on...="fun(this.id);"

function fun(x) {
if (document.getElementById){
document.getElementById(x).style.display = "none";
}}

Oder wo ist das Problem?
Wie soll das Script den aufgerufen werden?
Und wofür genau?

Ich hoffe ich konnte helfen, H2O

[Fritz]

Hallo,

Ich hoffe ich konnte helfen, H2O

Ja, danke. Hab mich total in der Logik verrannt.

Gruß Fritz

[Sven Rautenberg]

Moin!

Du kannst es aber z.B. so machen:

Kompliziert, würde ich meinen. :)

on...="fun(this.id);"

Eventhandler bezeichnen als "this" das Element, in dem sie drinstehen.

Mit onirgendwas="fun(this)" wird der Funktion exakt dieses Element übergeben.

function fun(x) {
if (document.getElementById){
document.getElementById(x).style.display = "none";
}}

Da das Element der Funktion schon bekannt ist, kann man direkt auf seine Properties zugreifen:
x.style.display = "none";

Fertig. Das Suchen der ID mit getElementById ist viel zu zeitaufwendig.

Als konkretes Beispiel: Mouseover-Highlighting mit Javascript (mußte IE-tauglich sein, JS ist definitiv eingeschaltet:

Javascript:
function hi(obj)
{
  if (obj.parentNode)
  {
    obj.parentNode.parentNode.style.backgroundColor="#DDD";
  }
}
function lo(obj)
{
  if (obj.parentNode)
  {
    obj.parentNode.parentNode.style.backgroundColor="#FFF";
  }
}

HTML:
<table>
<tr><td>Text</td><td><a href="linkziel" onmouseover="hi(this)" onmouseout="lo(this)">bearbeiten</a></td></tr>
</table>

Die Hintergrundfarbe der <tr>-Zeile wird geändert.

- Sven Rautenberg

[H2O]

Hallo Sven.

Kompliziert, würde ich meinen. :)

Vielleicht ein bisschen...
Aber es war das, was mir so spontan einfiel.

Eventhandler bezeichnen als "this" das Element, in dem sie drinstehen.

Ja, also gibt man dem Link eine id und schon versteckt es den Link.

Fertig. Das Suchen der ID mit getElementById ist viel zu zeitaufwendig.

Das finde ich nicht.

Als konkretes Beispiel: Mouseover-Highlighting mit Javascript (mußte IE-tauglich sein, JS ist definitiv eingeschaltet:

Wenn man natürlich etwas verändern will, was über dem Objekt ist, ist dein Script natürlich besser, aber ich dachte es gehe direkt um das Objekt.

Schönen Tag noch, H2O

[Sven Rautenberg]

Moin!

Eventhandler bezeichnen als "this" das Element, in dem sie drinstehen.

Ja, also gibt man dem Link eine id und schon versteckt es den Link.

Ohne ID kann man den Link ja auch verstecken, weil es "this" gibt.

Fertig. Das Suchen der ID mit getElementById ist viel zu zeitaufwendig.

Das finde ich nicht.

Das "zeitaufwendig" bezog sich nicht aufs Programmieren, sondern auf die Ausführungszeit von Javascript.

Wenn du deiner Funktion this.id übergibst, ist das ein String, der mit getElementById erst mühsam (für Javascript) in der Ansammlung aller IDs des Dokumentes herausgesucht werden muß, um dann den Zugriff beispielsweise auf die style-Eigenschaften zu bekommen.

Wenn du einfach "this" übergibst, dann ist das eine Referenz auf den konkreten Link. Ein Zugriff auf die styles-Eigenschaften ist direkt und ohne Suchaufwand möglich, das ist javascriptmäßig viel schneller ausgeführt.

Natürlich ist das bei genau einem Link ziemlich egal. Aber wenn's an Menüstrukturen geht, die aus- und eingeblendet werden sollen und etliche Links enthalten, dann wird das schon wieder interessant, denn von der Schnelligkeit der Reaktion dieses Menüs hängt dessen Bedienbarkeit entscheidend ab.

Als konkretes Beispiel: Mouseover-Highlighting mit Javascript (mußte IE-tauglich sein, JS ist definitiv eingeschaltet:

Wenn man natürlich etwas verändern will, was über dem Objekt ist, ist dein Script natürlich besser, aber ich dachte es gehe direkt um das Objekt.

Wenn ich direkt etwas am Link verändern will, spare ich mir natürlich diese parentNode-Geschichte.

onmouseover="hi(this)"

function hi(obj)
{
  obj.style.backgroundColor="#F00";
}

Schneller gehts eigentlich kaum. :)

- Sven Rautenberg

[H2O]

Hallo Sven.

Ohne ID kann man den Link ja auch verstecken, weil es "this" gibt.

Man lernt eben immer dazu...

Schneller gehts eigentlich kaum. :)

Gutes Script. Danke für die Info (auch wenn die Frage nicht von mir stammte).

Schönen Tag noch, H2O

[Struppi]

Du kannst es aber z.B. so machen:

on...="fun(this.id);"

function fun(x) {
if (document.getElementById){
document.getElementById(x).style.display = "none";
}}

oder noch besser:

on...="fun(this);"

function fun(x)
{
var s = x.style ? x.style : x;
s.display = "none";
}

a. ist this das selbe was du mit document.getElement bekommst (und diese Funktion ist relativ langsam).

b. Funktioniert diese Variante auch in Browsern, die weder getElementBy.. noch style kennen.

Struppi.

[H2O]

Hallo Struppi.

on...="fun(this);"

Ja, ja. Mittlerweile weiß ich, dass es so besser ist...

function fun(x)
{
var s = x.style ? x.style : x;
s.display = "none";
}

Ja. Das ist echt gut. 8-D

Danke für die Infos & noch einen schönen Tag, H2O