|
|||
Vollständige CSS-Positionsinformationen mit Javascript ermitteln
Hallo,
mir gehen bei einem Problem mal wieder die Ideen aus. Also ich möchte alle für die Positionierung relevanten Informationen eines mit position:absolute oder position:fixed ausgerichteten Blockelements ermitteln. Dafür brauche ich ein Objekt mit folgenden Eigenschaften: Code:
left right width top bottom height window.getComputedStyle liefert schon mal einen guten Anfang, nur werden darbei automatisch ALLE diese Werte in Pixelangaben umgerechnet. Aber mit prozentualen Angeben funktioniert das nicht - damit meine ich, wenn man den, mit getComputedStyle berechneten Pixel-Wert wieder setzt, dann verhällt sich das Element anders, als vorher mit Prozent-Wert. Ich brauche also nocheinmal 6 zusätzliche Boolean-Werte, die speichern, ob eine Angabe prozentual ist. Aber wie kann ich das Abfragen? Außerdem werden die Werte für width und height immer berechnet, auch wenn diese auto sind und das Element nur mit left und right bzw. top und bottom positioniert ist. Wie kann ich feststellen, ob dies der Fall ist? |
Sponsored Links |
Sponsored Links |
|
|||
Und wenn man nur die Werte width, height, right und bottom setzt?
Sicher kann ich für den Moment offsetTop, -Left -Width und -Height die Position ermitteln, aber sobald der Benutzer die Fenstergröße ändert, verhällt sich die Box dann anders, als vorher. Außerdem habe ich schon vergeblich versucht, eine offsetRight und offsetBottom-Methode zu entwickeln. Code:
function offsetRight (el) { return el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth; } Und selbst wenn ich das zum laufen bringe - es fehlt dann immernoch an einer Möglichkeit, festzustellen, ob die Box rechts oder unten verankert ist. Einfach nur zu prüfen ob der Wert für getComputedStyle['right'] existiert, reicht nicht, denn wenn die Werte left, width und right gesetzt sind, dann überschreibt left und width die right-Angabe, selbst, wenn diese zum Schluss steht. Aber getComputedStyle['right'] ist dann trotzdem gesetzt Geändert von MitjaStachowiak (09.04.2014 um 12:35 Uhr) |
|
|||
Hmm, mit getAttribute bekomme ich die korrekten Werte - jedoch nur, wenn die Box über inline-Styles positioniert ist. Da style.getAttribute nur im IE funktioniert, muss ich wohl element.getAttribute('style',false) nehmen und interpretieren.
Die genauen Pixelwerte kann ich ja weiterhin mit getComputedStyle ermitteln, aber wenigstens wenn inline-Styles verwendet werden, erhalte ich mit getAttribute zusätzlich die benötigten Informationen über Verankerung und prozentuale Angaben. Hat jemand eine bessere Idee? |
|
||||
was dann? Du wolltest doch die Werte, die für eine Positionierung relevant sind. Wenn du right benutzt wird width berechnet.
Zitat:
Inwiefern sollte sich die anders verhalten? Zitat:
Zitat:
Zitat:
|
|
|||
Naja, mal angenommen, die Seite ist 1000 Pixel breit (und 800 Pixel hoch). Jetzt mache ich direkt in den Body-Tag zwei DIVs mit folgendem Style:
Code:
<DIV style="position : absolute; top : 100px; left : 100px; width : 800px; height : 100px; border : 1px solid black; "></DIV> <DIV style="position : absolute; top : 300px; left : 100px; right : 100px; height : 100px; border : 1px solid black; "></DIV> Ich schreibe gerade ein Script, dass solche Boxen resizebar macht, also man kann durch Verschieben des Randes die Größe ändern. Dabei soll aber die untere Box weiterhin rechts verankert sein. Selbst, wenn ich die Verankerung mit Javascript und onResize mache, muss ich doch immer noch wissen, ob die Box rechts verankert ist, oder nicht... Ich habe jetzt einen, noch nicht 100%ig getesteten Code, der die Positionsangaben in das genünschte Integer-Objekt speichert, aber die rechte oder untere Verankerung, sowie die Angaben über prozentuale Positionen funktionieren nur, wenn es sich, wie oben, um ein Inline-Stylesheet handelt. Code:
// Positionsstyle feststellen this.pos = new Object(); var _this = this; var style; if (window.getComputedStyle) style = window.getComputedStyle(dieDIVBox, null); else style = dieDIVBox.currentStyle; var realStyle = new Object(); var s = dieDIVBox.getAttribute('style', false).replace(/\s/g, '').toLowerCase().split(';'); for (var i = 0; i < s.length; i++) { s[i] = s[i].split(':'); if (!s[i][0]) continue; realStyle[s[i][0]] = s[i][1]; } var posNumX = 0; var posNumY = 0; if (style['position'] == 'fixed') this.pos['fixed'] = true; else this.pos['fixed'] = false; if (style['zIndex']) this.pos['z'] = style['zIndex'] - this.mgr.startZIndex; else this.pos['z'] = this.mgr.startZIndex; function positionToInt (p, x) { if (realStyle[p] && realStyle[p] != 'auto') { if (x) posNumX++; else posNumY++; _this.pos[p] = parseInt(style[p]); if (realStyle[p].indexOf('%') > 0) _this.pos[p+'Percent'] = true; else _this.pos[p+'Percent'] = false; } else { _this.pos[p] = Number.NaN; _this.pos[p+'Percent'] = false; } } positionToInt('top', false); positionToInt('left', true); positionToInt('right', true); positionToInt('bottom', false); positionToInt('width', true); positionToInt('height', false); if (posNumX == 0) { posNumX++; this.pos['left'] = dieDIVBox.offsetLeft; } if (posNumY == 0) { posNumY++; this.pos['top'] = dieDIVBox.offsetTop; } if (posNumX == 1) { if (isNaN(this.pos['width'])) this.pos['width'] = dieDIVBox.offsetWidth; else this.pos['left'] = dieDIVBox.offsetLeft; } if (posNumY == 1) { if (isNaN(this.pos['height'])) this.pos['height'] = dieDIVBox.offsetHeight; else this.pos['top'] = dieDIVBox.offsetTop; } if (posNumX == 3) this.pos['right'] = Number.NaN; if (posNumY == 3) this.pos['bottom'] = Number.NaN; alert(' top='+this.pos['top']+'px,%='+this.pos['topPercent']+' left='+this.pos['left']+'px,%='+this.pos['leftPercent']+' right='+this.pos['right']+'px,%='+this.pos['rightPercent']+' bottom='+this.pos['bottom']+'px,%='+this.pos['bottomPercent']+' width='+this.pos['width']+'px,%='+this.pos['widthPercent']+' height='+this.pos['height']+'px,%='+this.pos['heightPercent']); Geändert von MitjaStachowiak (09.04.2014 um 18:33 Uhr) |
|
||||
Zitat:
|
|
|||
Doch, wenn ich die Breite der oberen Box um 100 Pixel verkleiner', dann muss ich .style.width = '700px'; schreiben, wenn ich die Breite der uneren Box um 100 Pixel verkleiner', dann muss ich .style.right = '200px'; schreiben.
Andernfalls wäre die untere Box nicht mehr rechts verankert. |
|
||||
Zitat:
|
Sponsored Links |
Stichwörter |
bottom, getcomputedstyle, positionierung, prozentual, right |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Softwareentwickler PHP, CSS, JavaScript (m/w) | itchristian | Jobs | 0 | 31.01.2012 16:31 |
Cheat Sheets zu CSS, PHP, JavaScript usw. | Lestat | Ressourcen | 1 | 14.08.2005 13:57 |
bildwechsel bei hover - nur mit css, ohne javascript? | Beb | CSS | 3 | 20.06.2005 08:48 |
Problem: CSS und Javascript | canetti | (X)HTML | 1 | 08.02.2005 11:41 |
Navi CSS & Javascript - okay so? | azrael | Site- und Layoutcheck | 22 | 26.04.2004 16:23 |