✔ Objektparameter ansprechen

[webraccoon]

Hallo Forum,

ich habe ein div mit folgendem konstrukt:
<div id="thumb_text1" style="top:100px; left:80px; clip:rect(0px 100px 55px 0px);">

ich möchte jetzt per JS die Parameter innerhalb des clip:rect ansprechen und manipulieren. Mir ist bekannt, daß ich auf Werte von Objekten, wie hier das div und seinen werten top und left, zugreifen kann. Aber wie gestalte ich das bei einem clip, das ja so gesehen kein Objekt mit ID repräsentiert?

jemand eine idee

webraccoon

 

[Sven Mintel]

Das "rect" ist ein Teil des clip-Attributes.
Ermitteln kannst den Wert im Bsp. per

document.getElementById('thumb_text1').style.clip

Ändern kannst du ihn bspw. so:

document.getElementById('thumb_text1').style.clip='rect(0px 33px 33px 0px)';

...was das <div> auf 33x 33 Pixel beschneiden würde.

Auf die einzelnen Angaben kannst du nicht direkt zugreifen... da wäre eine kleine Hilfsfunktion vonnöten.

Beachte aber, dass die clip-Eigenschaft nur bei absolute positionierten Elementen korrekt interpretiert wird.

 

[hela]

Hallo zusammen,

bei mir funktioniert das Ermitteln der clip-Werte nur so:

Bei Opera, Netscape und Firefox:

   var clipWerte = window.getComputedStyle("thumb_text1","" ).getPropertyValue("clip");

Beim Internet-Explorer muss man die 4 Grenzen des ausgeschnittenen Bereiches einzeln ermitteln:

   var clipOben = document.getElementById("thumb_text1").currentStyle.getAttribute("clipTop");
   var clipRechts = document.getElementById("thumb_text1").currentStyle.getAttribute("clipRight");
   var clipUnten = document.getElementById("thumb_text1").currentStyle.getAttribute("clipBottom");
   var clipLinks = document.getElementById("thumb_text1").currentStyle.getAttribute("clipLeft");

 

[Sven Mintel]

Keine Ahnung, was du für ein System hast... bei mir funktioniert

document.getElementById('thumb_text1').style.clip

in IE, Opera und Geckos...

 

[hela]

Win98.
Mit document.getElementById(id).style.clip werden zwar keine Fehler ausgegeben, allerdings auch keine Ausgabewerte.
Eigenartig

 

[Sven Mintel]

Da gehts bei mir auch
die clip-Eigenschaft muss dabei natürlich gesetzt sein....sonst gibts nix zurück(ist bei anderen style-Attributen genauso)

 

[hela]

Ja ja, alle Eigenschaftswerte gesetzt.

Falls du Zeit und/oder Lust hast, dann würde ich mich freuen, wenn du das angehängte Script ausprobieren könntest. Es liest u.a. die clip-Eigenschaft auch aus, wenn keine Eigenschaftswerte in den Stylesheets gesetzt wurden, dann wird dort z.B. "auto" ausgegeben.

... wie gesagt: anders geht's bei mir nicht.

 

[Sven Mintel]

Feines Skript, das

Dass das dort nicht funktioniert, wird daran liegen, dass du nicht die gesetzten Werte(per CSS oder JS) ermittelst, sondern die Werte entsprechend der Anzeige im Browser....vielleicht ist bei dieser Methode die clip-Eigenschaft nicht verfügbar.

 

[webraccoon]

so, nun endlich kam ich zum ausprobieren.

auslesen funktioniert sehr gut. beide varianten habe ich ausprobiert und beide gehen.
beim schreiben jedoch gibt es probleme:
mit:
var clipRechts = document.getElementById("thumb_text1").currentStyle.getAttribute("clipRight");
var clipBottom = document.getElementById("thumb_text1").currentStyle.getAttribute("clipBottom");
var clipInt = parseInt(clipRechts);
var clipInt = document.add.breite.value;
var clipInt = clipInt + "px";

document.getElementById('thumb_text1').style.clip='rect(0px clipInt 150px 0px)';

gibt er mir für den zweiten wert 0px und für den dritten wert auto aus.
kann man keine variablen als werte setzen

gruss
webraccoon

 

[webraccoon]

ok, ich habs:

document.getElementById('thumb_text1').style.clip="rect(" + 0 + " " + clipIntRechts + " " + clipIntUnten + " " + 0 + ")";

so gehts.

danke für die hilfe
webraccoon