Főoldalra

jQuery elemek területe.

Elemek magassága és szélessége.

height() - eleme magassága. (Melyet a height stílusmeghatározásakor, beírtunk.)

width() - eleme szélessége. (Melyet a width stílusmeghatározásakor, beírtunk.)

innerHeight() - elem magassága(beleértve a paddingot, de a bordert nem.)

innerWidth()- elem  szélessége (beleértve a paddingot, de a bordert nem.)

outerHeight() - elem  magassága (beleértve padding és border.)

outerWidth() - elem szélessége (beleértve padding és border.)

1. div elem. <div id="Div01">

#Div01{width: 770px; height: 170px;
border: 4px solid red; padding: 5px; background: orange;}

Szélesség: 770 + (2 * 4) + (2 * 5) = 788px;
Magasság: 170 + (2 * 4) + (2 * 5) = 188px


1.Teszt: <div id="Div01"> elem paraméterei.
$("#btn01").click(function() {
 alert("height = "+$("#Div01").height() ); 
});

$("#btn02").click(function() {
 alert("width = "+$("#Div01").width() ); 
});

$("#btn03").click(function() { 
 alert("innerHeight="+$("#Div01").innerHeight() );
});

$("#btn04").click(function() {
  alert("innerWidth="+$("#Div01").innerWidth() );
});

$("#btn05").click(function() {
  alert("outerHeight="+$("#Div01").outerHeight() );
});

$("#btn06").click(function() {
  alert("outerWidth="+$("#Div01").outerWidth() );
});

2.Teszt: <div class="Div02"> elem paraméterei.
$("#btn07").click(function() {
  alert("height = "+$(".Div02").height() );
});

$("#btn08").click(function() {
  alert("width = "+$(".Div02").width() );
});

$("#btn09").click(function() {
  alert("innerHeight="+$("#hw02").innerHeight() );
});

$("#btn10").click(function() {
  alert("innerWidth="+$("#hw02").innerWidth() );
});

$("#btn11").click(function() {
  alert("outerHeight="+$("#hw02").outerHeight() );
});

$("#btn12").click(function() {
  alert("outerWidth="+$(".Div02").outerWidth() );
});

2. div elem <div class="Div02">
Szélességet (width) és magasságot (height), nem határozunk meg:

.Div02{border: 4px solid green; padding: 5px; background: #cfc;}

Szélesség, width: Szülő elem - (2 * 4) + (2 * 5) = ? px
Magasság, height = (Tartalom helyfoglalása + (2 * 4) + (2 * 5) )

Ugyanazon class osztályazonosítóval, több elem is rendelkezhet!

3. div elem: <div class="Div02">
class azonosító és hozzá tartozó stílus, megegyezik a 2.div elemével. (Testvérek)
Szélességet (width) és magasságot (height), nem határozunk meg:

Magasságát, a területén elhelyezett tartalom határozza meg.

Szélességét, a közvetlen szülő elem határozza meg.
Például: <body>, ha közvetlen a <body> elemben van, vagy ezt a <div> elemet körülvevő, másik. <div> elem.

.Div02{
border: 4px solid green;
padding: 5px;
background: #cfc;
}

Szélesség, width: Szülő elem - (2 * 4) + (2 * 5) = ? px
Magasság, height = (Tartalom helyfoglalása + (2 * 4) + (2 * 5) )

2.Teszt lekérdezéseknél, nem határoztuk meg pontosan a szelektorral, hogy melyik elemet vizsgáljuk, csak a class osztályazonosító nevét.
Ilyenkor a program, az első megtalált class elem paramétereit határozza meg.
A 3. div elem paramétereinek lekérdezéséhez, meg kell határozni a szelektornál, hogy a szövegfolyamban ez a div szakasz, ezzel a class azonosítóval, hányadik, azaz, mi az indexszáma.
Az indexszámok 0-val kezdődnek. Ez a class azonosító 2-ik a szövegfolyamban, indexszáma = 1. 

$("#btn14").click(  function() { alert("3. div outerHeight = "+$(".Div02:eq(1)").outerHeight() );  }  );

Megjegyzés:
jQuery 1.12.0 - min.js: Egészszámokban adja vissza méreteket.(384)
jQuery v3.0.0 - beta1: Tizedes számokat is visszaadja, méreteknél.(384.3999938964844)