zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Vollständige CSS-Positionsinformationen mit Javascript ermitteln

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.04.2014, 20:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard 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
Alle diese Eigenschaften sollen Integerwerte (Pixel) sein, wobei Werte, die nicht verwendet werden, auf NaN gesetzt sein sollen.

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.04.2014, 20:52
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.938
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Für die Positionierung relevanten Informationen wären top, left, width, height. bottom und right berechnet sich aus diesen und der Fenstergröße. Üblicherweise werden diese Werte über die offset Angabe ermittelt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.04.2014, 11:31
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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;
}
funktioniert nur, wenn offsetParent selbst wieder eine absolut positionierte Box ist, ist dies aber der Body-Tag kommt etwas falsches raus. Dann bräuchte ich noch Fallunterschiedungen, die in diesem Fall auf innerWidth zurückgreifen.

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 11:35 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.04.2014, 11:52
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #5 (permalink)  
Alt 09.04.2014, 16:50
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.938
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
Und wenn man nur die Werte width, height, right und bottom setzt?
was dann? Du wolltest doch die Werte, die für eine Positionierung relevant sind. Wenn du right benutzt wird width berechnet.


Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
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.
Da verstehe ich nicht, was du meinst?
Inwiefern sollte sich die anders verhalten?

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
Außerdem habe ich schon vergeblich versucht, eine offsetRight und offsetBottom-Methode zu entwickeln.
Wie gesagt, das wird aus der Position, der Größe und der Fenstergröße berechnet. Die musst du in deiner Rechnung natürlich miteinbinden.

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
funktioniert nur, wenn offsetParent selbst wieder eine absolut positionierte Box ist, ist dies aber der Body-Tag kommt etwas falsches raus. Dann bräuchte ich noch Fallunterschiedungen, die in diesem Fall auf innerWidth zurückgreifen.
Ja die Größe des Fensters zu berechnen ist nicht einfach, es spielt auch noch eine Rolle ob die Seite im Quirks- oder Standardmode ist und es gibt Browserunterschiede. body.offsetWidth ist nicht der richtige Wert (zumindest im Standardmode), du brauchst documentElement und je nach Browser die Eigenschaft scrollHeight/Width oder offsetHeight/width

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
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
Ich verstehe nicht dein Problem. Wie gesagt, arbeite mit top,left, width, height und alles ist gut. wArum du unbedingt right und bottom benötigst erschliest sich mir nicht.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.04.2014, 17:10
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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>
Das wären dann zwei gleich breite DIV-Boxen. Aber wenn jetzt der Benutzer die Fenstergröße ändert, dann werden sie nicht mehr gleich breit sein. Die obere wird ihre Größe beibehalten, die untere wird sich der Seite anpassen.

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 17:33 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 09.04.2014, 17:23
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.938
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
Das wären dann zwei gleich breite DIV-Boxen. Aber wenn jetzt der Benutzer die Fenstergröße ändert, dann werden sie nicht mehr gleich breit sein. Die obere wird ihre Größe beibehalten, die untere wird sich der Seite anpassen.

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...
Irgendwie ist mir nicht klar, wohin das führen soll. Wenn man die Größe ändert, spielt es keine Rolle ob das Element verankert ist oder nicht und für das ermitteln der Werte auch nicht.
Mit Zitat antworten
  #8 (permalink)  
Alt 09.04.2014, 17:29
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.04.2014, 18:14
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.938
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MitjaStachowiak Beitrag anzeigen
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.
Jetzt verstehe ich was du meinst. Also ich sehe da keine Möglichkeit das zuverlässig zu ermitteln, es gibt kein Merkmal das die beiden unterschiedet
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.04.2014, 18:56
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.10.2010
Beiträge: 151
MitjaStachowiak befindet sich auf einem aufstrebenden Ast
Standard

Ok... Naja, dann muss ich in der Dokumentation darauf aufmerksam machen, dass die Verankerung verloren geht, wenn man keine Inline-Styles verwendet
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bottom, getcomputedstyle, positionierung, prozentual, right

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Softwareentwickler PHP, CSS, JavaScript (m/w) itchristian Jobs 0 31.01.2012 15:31
Cheat Sheets zu CSS, PHP, JavaScript usw. Lestat Ressourcen 1 14.08.2005 12:57
bildwechsel bei hover - nur mit css, ohne javascript? Beb CSS 3 20.06.2005 07:48
Problem: CSS und Javascript canetti (X)HTML 1 08.02.2005 10:41
Navi CSS & Javascript - okay so? azrael Site- und Layoutcheck 22 26.04.2004 15:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:02 Uhr.