Zusammenfassung der Attribute „Offset', „Client' und „Scroll' in den Javascript-Kenntnissen-js-Tutorial-php.cn

Zusammenfassung der Attribute „Offset', „Client' und „Scroll' in den Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:45:26

Original

1267 Leute haben es durchsucht

HTML-Elemente haben mehrere Attribute, beginnend mit Offset, Client und Scroll, die immer verwirrend sind. Schreiben Sie auf, was Sie in dem Buch sehen, und teilen Sie es mit Freunden, die es brauchen. Hauptsächlich die folgenden Attribute:

Die erste Gruppe: offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent

Die zweite Gruppe: clientWidth, clientHeight, clientLeft, clientTop

Die dritte Gruppe: scrollWidth, scrollHeight, scrollLeft, scrollTop

Die detaillierte Definition lautet wie folgt:

　1.1 offsetWidth und offsetHeight eines HTML-Elements geben seine Bildschirmgröße in CSS-Pixeln zurück, einschließlich des Rands und der Polsterung des Elements, jedoch nicht des äußeren Rands.

　1.2 Die Eigenschaften offsetLeft und offsetTop geben die X- und Y-Koordinaten des Elements zurück. Normalerweise sind ihr Rückgabewert die Dokumentkoordinaten. Bei Nachkommen positionierter Elemente und einigen anderen Elementen (z. B. Tabellenzellen) beziehen sich die von diesen Eigenschaften zurückgegebenen Koordinaten jedoch auf das Vorgängerelement und nicht auf das Dokument.

　1.3 Das Attribut offsetParent gibt das übergeordnete Element relativ zu offsetLeft und offsetTop an. Wenn offsetParent null ist, handelt es sich bei dem Rückgabewert der beiden letztgenannten um Dokumentkoordinaten. Im Allgemeinen erfordert die Verwendung von offsetLeft und offsetTop zur Berechnung der Position von Element e eine Schleife:

//计算元素的文档坐标
function getElementPosition(e){
  var x=0,y=0;
  while(e !=null){
    x +=e.offsetLeft;
    y +=e.offsetTop;
    e=e.offsetParent; 
  }
  return {x:x, y:y} ;  
}

Nach dem Login kopieren

Die mit dieser Methode berechnete Position ist nicht immer korrekt. Es wird empfohlen, die integrierte Methode getBoundingClientRect() zu verwenden.

　2.1 clientWidth und clientHeight ähneln den Eigenschaften offsetWidth und offsetHeight, außer dass sie nicht die Rahmengröße, sondern nur den Inhalt und die Polsterung enthalten. Wenn der Browser gleichzeitig Bildlaufleisten zwischen der Polsterung und dem Rand hinzufügt, enthalten die Rückgabewerte von clientWidth und clientHeight keine Bildlaufleisten. Beachten Sie, dass clientWidth und clientHeight für Inline-Elemente vom Typ , immer 0 zurückgeben.

2.2 clientLeft und clientTop geben die horizontalen und vertikalen Abstände zwischen der Außenkante des Elements und der Außenkante seines Randes zurück. Normalerweise entsprechen diese Werte der Breite des linken und oberen Rands. Wenn das Element jedoch über Bildlaufleisten verfügt und der Browser diese Bildlaufleisten nach links oder oben dreht, wird auch die Breite der Bildlaufleisten berücksichtigt. Für Inline-Elemente sind sie immer 0. Normalerweise sind clientLeft und clientTop von geringem Nutzen. 　3.1 scrollWidth und scollHeight sind die Größe des Inhaltsbereichs des Elements zuzüglich seines Abstands zuzüglich etwaiger überlaufender Inhalte. Wenn der Inhalt genau mit dem Inhaltsbereich übereinstimmt, ohne dass er überläuft, sind diese Eigenschaften gleich clientWidth und clientHeight. Wenn sie jedoch überlaufen, enthalten sie den Überlaufinhalt und der Rückgabewert ist größer als clientWidth und clientHeight. 　3.2 scrollLeft und scrollTop geben die Position der Bildlaufleiste des Elements an. Beachten Sie, dass scrollLeft und scrollTop beschreibbar sind und Sie sie so einstellen können, dass sie den Inhalt im Element scrollen (HTML-Elemente verfügen nicht über eine scrollTo()-Methode ähnlich dem Window-Objekt). obj.offset[WidthHeightTopLeft] Ermittelt die Position des Steuerelements relativ zum übergeordneten Steuerelement event.offset[XY] übernimmt die Koordinaten der Mausphase im Steuerelement, das das Ereignis ausgelöst hat event.screen[XY] Maus relativ zu Bildschirmkoordinaten event.client[XY] Die Mauskoordinaten relativ zur Webseite liegen bei obj.scroll[WidthHeightTopLeft] Ermittelt die Größe des Objektscrolls obj.client[WidthHeightTopLeft] Ermitteln Sie die Größe des sichtbaren Bereichs des Objekts <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id='div1' >offset 控件相对于父窗体的位置</div> <script> function offset(ids){ ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>"; ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>"; ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>"; ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>"; ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>"; ids.innerHTML+="offsetX ="+event.offsetX+"<BR>"; ids.innerHTML+="offsetY ="+event.offsetY+"<BR>"; } function screen(ids){ ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>"; ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>"; ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>"; ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>"; } function client(ids){ ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>"; ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>"; ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>"; ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>"; } function eventc(ids){ ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>"; ids.innerHTML+="event.screenY ="+event.screenY+"<BR>"; ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>"; ids.innerHTML+="event.clientY ="+event.clientY+"<BR>"; } </script> </body> </html> Nach dem Login kopieren Jeder Browser verfügt über diese Eigenschaften und einige Werte können unterschiedlich sein. Schreiben Sie den Code selbst, vergleichen Sie die Ergebnisse und Sie werden es verstehen.