SCR34: A szövegmérettel arányos méret és pozíció kiszámolása
Alkalmazás
Kliens-oldali szkript.
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
A méret és pozíció kiszámolása bonyolult folyamat lehet, és a különböző böngészők egymástól eltérő eredményeket produkálhatnak. Ez olyan esetben fordulhat elő, amikor a CSS stílus összekeveri egy objektum belső kitöltését, margóit és szélességét, vagy összekeverésre kerülnek az olyan eltolási és síkbeli értékek, mint például az offsetWidth és szélesség. Ezek közül néhányan különbözően viselkednek ráközelítés esetén. Az Internet Explorer 6 és a modernebb verziók, valamint ugyanezen böngésző korábbi verziói közötti különbségekkel kapcsolatos információkért tekintse meg a MSDN: Fix the Box Instead of Thinking Outside It című részt.
Leírás
A technika célja az elemek szövegméretezéssel arányos méret és pozíció értékeinek a meghatározása.
A JavaScriptnek négy tulajdonsága segíti az elemek méretének és pozíciójának meghatározását:
-
offsetHeight(az elem magassága pixelekben megadva) -
offsetWidth(az elem szélessége pixelekben megadva) -
offsetLeft(az elem baloldali távolsága a szülőjéhez (offsetParent) viszonyítva pixelekben megadva) -
offsetTop(az elem távolsága a szülőjének (offsetParent) tetejétől számítva pixelekben megadva)
Az offsetHeight és
offsetWidth tulajdonságokkal történő
számítás egyszerű, de az elemek baloldali és felső
abszolút igazításának értékeihez figyelembe kell venni a
szülő elemet is. Az alábbi calculatePosition
funkció a végső érték megadása érdekében megismétli az
adott elem szülőjének csomópontjait. A funkció két
paramétert használ: objElement (a kérdéses
elem neve), és az eltolás tulajdonság
(offsetLeft vagy
offsetTop).
Példák
1. példa
A Javascript funkció:
Példa kód:
function calculatePosition(objElement, strOffset)
{
var iOffset = 0;
if (objElement.offsetParent)
{
do
{
iOffset += objElement[strOffset];
objElement = objElement.offsetParent;
} while (objElement);
}
return iOffset;
}
Az alábbi példában egy elem balról mérve ugyanolyan távolságra kerül igazításra a vele együtt szereplő objektumhoz:
Példa kód:
// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop') + objReference.offsetHeight + 'px';
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
- C12: Százalékos érték használata a karakterek méretének megadásához
- C14: Az em mértékegység használata karakter méretek meghatározásához
- C17: Szöveget tartalmazó űrlap elemek méretezése
- C20: Oszlopok szélességének meghatározása relatív mértékegységekkel olyan módon, hogy a böngésző újraméretezésekor a sorok átlagosan legfeljebb 80 karakter hosszúságúak legyenek
- C24: CSS használata a tárolók méretének százalékos beállításához
- C26: A sorok olvasásához szükséges vízszintes gördítősáv alkalmazását nem igénylő elrendezés változat biztosítása
Ellenőrzések
Folyamat
-
Nyisson meg egy olyan lapot, amelyen a dobozok méretei követik a szöveg méreteinek változásait.
-
A böngésző beállítási lehetőségeinek használatával (és nem a ráközelítéssel) növelje meg a szöveg méretét 200 %-ra.
-
Vizsgálja meg, hogy a dobozok mérete a szövegek befogadására alkalmas méretűvé változott-e.
- Bizonyosodjon meg arról, hogy a méret növelésének következményeként szöveg nem tűnt el, vagy került levágásra.
Elvárható eredmények
-
A 3. és 4. pontok igazak.