Rahmenbreite von Element ermitteln

[Katharina]

Hallo,

ich möchte per Javascript die Rahmenbreite eines Elements ermitteln. Problem ist, dass die 'border'-CSS Angabe nicht im style Attribut steht, sondern in einer CSS-Klasse. element.style.borderWidth funktioniert daher nicht.

Kennt jemand eine Alternative (die in FF, IE, OP, Safari) funktioniert?

Danke schonmal,
Katharina

[plan_B]

Hallo,

ich möchte per Javascript die Rahmenbreite eines Elements ermitteln. Problem ist, dass die 'border'-CSS Angabe nicht im style Attribut steht, sondern in einer CSS-Klasse. element.style.borderWidth funktioniert daher nicht.

die suche nach getComputedStyle currentStyle sollte dich weiterbringen

Gruß plan_B

[Katharina]

Hi,

die suche nach getComputedStyle currentStyle sollte dich weiterbringen

das habe ich auch schon probiert. Aber im Firefox ist border width immer leer. Dazu habe ich dann das (http://www.quirksmode.org/dom/getstyles.html) gefunden. Hier kann man lesen, dass der Firefox nicht alle styles im currentStyle berücksichtigen kann (border kann er nicht).

Das ist also leider keine Lösung!

Grüße,
Katharina

[ChrisB]

Hi,

die suche nach getComputedStyle currentStyle sollte dich weiterbringen

das habe ich auch schon probiert. Aber im Firefox ist border width immer leer. Dazu habe ich dann das (http://www.quirksmode.org/dom/getstyles.html) gefunden. Hier kann man lesen, dass der Firefox nicht alle styles im currentStyle berücksichtigen kann (border kann er nicht).

Das ist also leider keine Lösung!

Na dann bleibt dir noch selber ausrechnen - der Firefox liefert auf der genannten Seite fuer den Paragraph mit der ID "test" ueber getStyle eine width von 224px, ein padding-left und -right von jeweils 10px, sowie eine offsetWidth von 246.
246 - 224 - 2*10 = 2
Also hat das Element insgesamt 2px seitlichen Rahmen. Wenn du jetzt noch voraussetzen kannst, dass es auf beiden Seiten einen Rahmen hat (und dieser auf beiden Seiten gleich breit ist) - dann sind das also 1px auf jeder Seite.

Darf man fragen, wofuer du diese Abfrage der Rahmenbreite brauchst?

MfG ChrisB

[Katharina]

Hallo,

Darf man fragen, wofuer du diese Abfrage der Rahmenbreite brauchst?

klar darfst Du nachfragen ;-)
Ich positioniere einen Layer (div, quasi eine Art Popup) innerhalb der Seite - und zwar pixelgenau. Die Positionierung ist natürlich von so schönen Späßen wie position:absolute / relative der Elternelemente, Scrollstate der Elternelemente und eben leider auch Border der Elternelemente abhängig. Dafür brauche ich also die Border-Breiten eines Elements.

Ist insgesamt eine ganz schön komplizierte Sache, weil verschiedene ineinander verschachtelte Layer mit unterschiedlichsten Positionierungen vorhanden sind. Aber es funktioniert in allen genannten Browsern. Problem ist nur, dass jetzt in einem Fall eines der Elternelemente einen Rahmen (1px breit) + Scrollbar besitzt, der Layer ist wegen dem Rahmen dann (im IE) genau um 1px falsch positioniert.

Habe es momentan so gelöst, dass der Rahmen des Elements auch im style Attribut auftaucht, das ist aber keine allgemeine Lösung, weil Rahmen von Elementen mit CSS Klassen dann nicht beachtet werden. Daher meine Frage an Euch ;-)

Grüße,
Katharina

[Cybaer]

Hi,

Habe es momentan so gelöst, dass der Rahmen des Elements auch im style Attribut auftaucht, das ist aber keine allgemeine Lösung, weil Rahmen von Elementen mit CSS Klassen dann nicht beachtet werden.

Alle (nicht-dynamischen) Stile, die ich per JS setze, notiere ich prinzipiell im normalen Stylesheet, wo ich sie bei Bedarf auslese. Damit sind die Stile nur noch genau da, wo sie hingehören: Ausschließlich im Stylesheet.

Gruß, Cybaer

[Gunnar Bittersmann]

@@Katharina:

ich möchte per Javascript die Rahmenbreite eines Elements ermitteln.

Dieses sei 'foo'.

Problem ist, dass die 'border'-CSS Angabe nicht im style Attribut steht, sondern in einer CSS-Klasse. element.style.borderWidth funktioniert daher nicht.

Kennt jemand eine Alternative (die in FF, IE, OP, Safari) funktioniert?

if (window.getComputedStyle)  
  var borderWidth = window.getComputedStyle(foo, "").getPropertyValue("border-width");  
else if (foo.currentStyle)  
  var borderWidth = foo.currentStyle.borderWidth;

[</archiv/2007/7/t157244/#m1022898> f.]

Live long and prosper,
Gunnar

[Struppi]

Kennt jemand eine Alternative (die in FF, IE, OP, Safari) funktioniert?

if (window.getComputedStyle)

var borderWidth = window.getComputedStyle(foo, "").getPropertyValue("border-width");
else if (foo.currentStyle)
  var borderWidth = foo.currentStyle.borderWidth;

>   
> [</archiv/2007/7/t157244/#m1022898> f.]  
  
Kann das mittlerweile Opera? Und was ist mit Safari?  
  
Struppi.

[Cybaer]

Hi,

Kennt jemand eine Alternative (die in FF, IE, OP, Safari) funktioniert?

Die 3. Möglichkeit: Du kannst auch das CSS direkt auslesen, wenn die border-width dort notiert ist: http://Coding.binon.net/cssRule

Gruß, Cybaer