Variable Höhe in Variable

Alienx

Ave,

so nach einer knappen Stunde Googeln, Testen und Kopfzerbrechen stell ich notgedrungen meine Frage mal hier :

Und zwar geht es um die variable Höhe eines Elementes (Bildes oder divs etc.), die ich auslesen und in einer Variable speichern möchte. Diese Variable soll später dazu benutzt werden, die Höhe zu verändern.

Habe dazu mal folgendes Schema zum Verdeutlichen :

HTML

var Hoehe = document.NameDesElements.height
function skalieren() {
Hoehe++;
document.NameDesElements.height = Hoehe;
}

Nun ist ja die Höhe variabel, also habe ich es mal mit offsetHeight versucht :

HTML

var Hoehe = document.all.NameDesElements.offsetHeight

was aber dann auch nicht funktioniert hat.

Wo liegt das Problem? Hat jemand eine Idee? Wäre wirklich sehr dankbar. (Is bestimmt wieder ´n was ganz simples, das ich übersehen hab ^^)

MfG Alienx

phore

Klar funktioniert das, du hast es sogar (fast) richtig gemacht Ich gehe aber davos aus (da du nicht den ganzen Code gepostet hast), dass du auf das Element zuzugreifen versuchst, bevor es überhaupt geladen ist. Warte also erstmal das window.onload ab, dann kannst du auf alle Elemente zugreifen.
Also so:

Code

window.onload = function ()
  {
  var height = document.element_name.offsetHeight;
  alert(height);
  }

Die Höhe ändern würde ich dann aber mit der style Eigenschaft des Elements, denn das .height Attribut wird nur bei einem Bild funktionieren. Also so:

Code

window.onload = function ()
  {
  var your_element = document.yourElement;
  var elem_height = your_element.offsetHeight;
  set_height(your_element, (elem_height+10));
  }

function set_height (elem, new_height)
  {
  var new_height = parseInt(new_height);
  elem.style.height = new_height+'px';
  }

Alles anzeigen

Übrigens: document.all ist IE 4 Kram, braucht man nicht.

Gruss

Alienx

Zitat von phore
Klar funktioniert das, du hast es sogar (fast) richtig gemacht Ich gehe aber davos aus (da du nicht den ganzen Code gepostet hast), dass du auf das Element zuzugreifen versuchst, bevor es überhaupt geladen ist. Warte also erstmal das window.onload ab, dann kannst du auf alle Elemente zugreifen.
Also so:
Code
window.onload = function ()
  {
  var height = document.element_name.offsetHeight;
  alert(height);
  }
Die Höhe ändern würde ich dann aber mit der style Eigenschaft des Elements, denn das .height Attribut wird nur bei einem Bild funktionieren. Also so:
Code
window.onload = function ()
  {
  var your_element = document.yourElement;
  var elem_height = your_element.offsetHeight;
  set_height(your_element, (elem_height+10));
  }

function set_height (elem, new_height)
  {
  var new_height = parseInt(new_height);
  elem.style.height = new_height+'px';
  }
Alles anzeigen
Übrigens: document.all ist IE 4 Kram, braucht man nicht.

Gruss

Hi,

danke für die Hilfe. Wofür steht bei dir "elem"? Wurde ja nirgends als Variable initialisiert. Glaube daran haperts im Moment noch. Der Rest ist mir klar. Schonmal thx bis hierher.

MfG Alienx

phore

Daran haperts nicht, elem ist eine Variable, sie wird aber nicht in der Funktion set_height() definiert, sondern im window.onload (var your_element). Sie wird dann als Übergabeparameter der Funktion set_height() mitgegeben, der sie dann somit auch hat (bei der Variable new_height ist es genau gleich). Lies mal etwas über Funktionen und wie man sie benutzt: http://de.selfhtml.org/javascript/sprache/funktionen.htm

Funktioniert denn das Script jetzt? Wenn nicht - post hier bitte mal deinen ganzen Code rein sonst kann ich dir schlecht weiterhelfen.

P.S. - vermeide bitte direkt-Zitate, da niemand zwischen meinem und deinem Post gepostet hat, ist es ja klar auf welchen Post sich deine Antwort bezieht. Danke.

Alienx

Ave,

mir ist schon klar, wie man Parameter an Funktionen übergibt, habe mich nur eben gewundert, wo denn nun elem herkommt, stand da eben aufm Schlauch, aber mir isses jetzt klar, sry.

Nein, das Skript funktioniert nicht, weiß leider im Moment nicht, woran es liegt.

Das Bild is da :

HTML

<img src="test.png" name="test alt="test" title="test" />

Und der Code passt, habe ihn jetzt mal ganz im Urzustand gelassen und nur den Elementnamen angepasst :

HTML

window.onload = function () {
var your_element = document.test;
var elem_height = your_element.offsetHeight;
set_height(your_element, (elem_height+10));
}
function set_height(elem, new_height) {
var new_height = parseInt(new_height);
elem.style.height = new_height+'px';
}

Und das ganze wird dann per onclick aufgerufen und das Pic müsste ja dann jedesmal um 10px vergrößert werden.

Ich glaub, ich steht jetzt irgenwie voll auf´m Schlauch, sry. Weißt du, wo der Fehler liegt?

Auch hier nochmal vielen Dank für die bisherige Hilfe.

MfG Alienx

phore

Zitat von Alienx

mir ist schon klar, wie man Parameter an Funktionen übergibt, habe mich nur eben gewundert, wo denn nun elem herkommt

Offenbar eben nicht denn elem ist ja der Übergabeparameter. Egal.

HTML

<img src="test.png" name="test alt="test" title="test" />

Der Fehler ist hier, nach name hast du " vergessen. Also richtig ist es so:

HTML

<img src="test.png" name="test" alt="test" title="test" />

Da du aber die Originalhöhe nur einmal wissen musst, kannst du sie gleich beim onload in die style.height schreiben, dann bei jedem onclick nur noch mit style.height arbeiten. Beispiel:

HTML

<html>
<head>
<script type="text/javascript">
  window.onload = function ()
    {
    the_image = document.meinBild;
    the_image.style.height = the_image.offsetHeight+'px';
    }

  function enlarge_image (ratio)
    {
    the_image.style.height = (parseInt(the_image.style.height)+parseInt(ratio))+px;
    }
</script>
</head>
<body>
<a href="#" onclick="enlarge_image(10);">vergr&ouml;ssern</a>


<img src="http://www.bildvoneineranderendomain.com" name="meinBild" />
</body>
</html>

Alles anzeigen

Das Bild wird aber scheisse aussehen je grösser es wird, denn es werden nur die Pixel vergrössert, das Bild wird dann pixelig und unscharf wenn gross wird.

Alienx

Ave,

bei dem Namen, das passt schon, im original Skript ist ist das Anführungszeichen drin, hab ich nur hier beim schnellen Tippen vergessen.

Das neue Skript funzt leider auch nicht. Werd mich später nochmal drüber setzen oder mir ggf. noch ne andere Lösung überlegen.

Ich sagte ja bereits oben, dass mir die Parametersache durchaus klar ist und ich nur schlampig gelesen habe - aber egal.

Dass ein Bild mit der Zeit verzerrt ist mir klar, dafür gibbet dann später ne Abfrage, die die Funktion nur bis zu einer gewissen Größe zulässt. Habe es vorläufig mal mit ner festen Höhe geregelt. Aber wie gesagt, werde mir noch was neues überlegen.

Auf jeden Fall bedanke ich mich für die Hilfe, hast mir nen guten Denkanstoß gegeben.

MfG Alienx

synaptic

also ich rate prinzipiell dazu mit document.getElementById() zu arbeiten und wenn es um styles geht auch das style-attribut zu setzen...

phore

Zitat von synaptic

also ich rate prinzipiell dazu mit document.getElementById() zu arbeiten und wenn es um styles geht auch das style-attribut zu setzen...

Warum den ganzen DOM-tree nochmal durchsuchen wenn man auch direkt auf das Element zugreifen kann? getElementById() sollte nur verwendet werden wenn es entweder nicht anders geht oder wenns wirklich Sinn macht.

Das style Attribut ist gesetzt, auch wenn du es nicht explizit im HTML setzst. Entweder ist es leer, oder es sind computed styles, die das Element vom parent-Element erbt. Zudem kannst du genau so gut das style Attribut über JS setzen als mit HTML. Der einzige Fall wo du das style Element mit HTML zu setzen brauchst, ist wenn du mit einem der style Werte rechnen willst*. Das ist zwar hier der Fall, aber da die Höhe Variabel ist, müssen wir sie sowieso manuell mit JS setzen.
* auch da könnte man mit JS, crossbrowser, den gerechneten Wert auslesen.

Alienx - wenn du mir nicht die ganze Datei zeigst (damit ich sehen kann, wie es eingebunden ist) oder zumindest den Javascript Fehler sagst, kann ich dir nicht weiterhelfen.

synaptic

also für mich is es was anderes ob da ein height-attribut genutzt wird oder ob man ein style-attribut benutzt und dort entsprechende styles reinschreibt
und das document.getElementById() ist imo crossbrowsertauglich und man kann damit prima vielen fallstricken aus dem weg gehen wenn es darum geht nen script zu schreiben, was in allen gängen browsern funzen soll...

phore

Ich weiss nicht was du mit deinem ersten Satz meinst.
Zum Zweiten: dass macht es nicht richtiger

Tags