Javascript/DOM - Alternative zu "getElementById"

[ezzemm]

Hallo zusammen!

Ich möchte eine Art Dropdown-Menü mit Javascript realisieren. Dazu muss ich den Abstand eines Links von der linken Seite bestimmen. Dies realisiere ich momentan so:
<style>body {margin: 0; padding: 0} a {margin-left: 100px}</style>

<script>
function bar(param) {
var a = document.getElementById(param);
var b = a. offsetLeft;
alert(b);
}
</script>

<a id="foo" href="Javascript:bar('foo')">Link</a>


Wie man sieht muß ich dem Link der die Funktion aufruft eine ID zuweisen und diese ID der Funktion mit übergeben.
Gibt es keine Möglichkeit wie ich mir die ID des Links sparen kann? Einen Befehl wie "getElementHowCalledThisFunction"?
Oder einen Workaround über "getElementsByTagName" der dann rausfindet, welches der Elemente die Funktion gestartet hat?

[PatkIllA]

Du kannst auch mit this als parameter direkt das Element übergeben.
Das ist dann einfacher bei C&P.

[ezzemm]

Du kannst auch mit this als parameter direkt das Element übergeben.
Das ist dann einfacher bei C&P.

Wie ist da die Syntax? So funktioniert es leider nicht:

<style>body {margin: 0; padding: 0} a {margin-left: 100px}</style>

<script>
function bar() {
var a = document.this;
var b = a.offsetLeft;
alert(b);
}
</script>

<a href="Javascript:bar()">Link</a>

Und so leider auch nicht:

<style>body {margin: 0; padding: 0} a {margin-left: 100px}</style>

<script>
function bar(param) {
var a = document.getElementById(param);
var b = a. offsetLeft;
alert(b);
}
</script>

<a id="foo" href="javascript:bar(this)">Link</a>

[PatkIllA]

<style>body {margin: 0; padding: 0} a {margin-left: 100px}</style>

<script>
function bar(param) {
var b = param.offsetLeft;
alert(b);
}
</script>

<a id="foo" href="javascript:bar(this)">Link</a>
so müsste es gehen. Du übergibst direkt eine Referenz zum Link.

[ezzemm]

Ich habe es gerade ausprobiert; man erhält zwar keine Fehlermeldung aber das Alertfenster enthält nur den Wert "undefined" anstelle der "100".

[darph]

Inline-Elemente haben kein Offset.


Abgesehen davon: Nutze lieber den onClick-Eventhandler, den JavaScriptaufruf als URL zu maskieren ist unschön, weil es ja de facto kein Link ist.

[Kinman]

this sollte Dir eigentlich schon helfen.
Desweiteren kann man mit den Nodes arbeiten und getElementsByTagName (http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name) ist auch zu gebrauchen.

mfg Kinman

[darph]

this sollte Dir eigentlich schon helfen.
<style>body {margin: 0; padding: 0} a {margin-left: 100px}</style>

<script>
function bar(param) {
var b = param.offsetLeft;
alert(b);
}
</script>
<p onClick="bar(this)">
<a id="foo" href="javascript:bar(this)">Link</a></p>

So bekomme ich 2 Meldungen: 0 und "undefined". Wohl 0, weil p hier kein gar kein Elternelement hat.

[ezzemm]

Hallo zusammen! Danke für die Hilfe, so funktioniert es wie ich es mir gewünscht hatte:
<script>
function bar(param) {
var b = param.offsetLeft;
alert(b);
}
</script>
<a href="#" onclick="bar(this)">Link</a>

Und interessanterweise so nicht (Meldung statt "100" ist "undefined"):
<script>
function bar(param) {
var b = param.offsetLeft;
alert(b);
}
</script>
<a href="Javascript:bar(this)">Link</a>

Was aber kein Problem ist, da ich im eigentlichen Script mit onmouseover und -out arbeite. Dankeschön :)

[Sephiroth]

Liegt an der Art und Weise, wie die Funktion aufgerufen wird.
Bei der ersten wird eine Event (Click-Event) ausgelöst, es gibt ein zugehöriges Objekt was mit this referenziert werden kann (a-Element) und der Eventlistener (hier die Funktion bar) wird benachrichtigt und tut was sie eben tun soll.
Bei der zweiten Variante rufst du die Funktion direkt auf und in dem Moment ist this nicht das a-Element, sondern das Fenster (window Objekt)!

Inline-Elemente haben kein Offset.
Jedes Element hat eine Position und offsetLeft ist die Position der linken oberen Ecke. Bei nicht-sichtbaren Elementen ist sie 0.