Konkrét pixelszám %-ból JS-sel

Konkrét pixelszám %-ból JS-sel
2007-11-08T15:53:09+01:00
2007-11-08T18:37:12+01:00
2022-11-06T13:50:44+01:00
Banderasz
Üdv!

Ezúttal abba a problémába estem, hogy nem tudom lekérdezni egy tetszőleges objektum egy CSS tulajdonságát, ha azt a CSS definíciós részben nem pixelben, hanem %-ban adtam meg.

Érthetőbben: Van mondjuk egy ilyen DIV-em:

<style type="text/css"> .Ez_A_DIV { left: 0px; top: 0px; width: 100%; height: 100%; } </style> <div id="Ez_A_DIV" class="Ez_A_DIV"></div>

Aztán JavaScript-tel le szeretném kérdezni a Width tulajdonságot így:

var Obj = document.getElementById("Ez_A_DIV"); alert(Obj.style.width);

De így nem kapok a kimeneten semmit sem, mivel még JS-sel nem változtattam a Width értékén, így JS alól ez így hozzáférhetetlen.

Oké, mondom akkor megkérdezem a böngészőt, hogy mit sikerült az objektummal kapcsolatba renderelnie. Ehhez tuti segítséget Methos adott ebben a topikban:
http://prog.hu/tudastar/71585-9/Hogyan+tud+a+JS+egy+CSS+class-bol+ol...
Az ő általa mutatott függvény visszaad egy objektumot, ami a kért objektum renderelt CSS tulajdonságait tartalmazza:

function getCSS(obj){ if (obj.currentStyle) { return obj.currentStyle; } else if (document.defaultView && document.defaultView.getComputedStyle) { return document.defaultView.getComputedStyle(obj,""); } }

Ez már jó volna, csak ha ezt használom, akkor a Width tulajdonságra azt mondja, hogy 100%, és nem azt, hogy pontosan hány pixel:

var Obj = document.getElementById("Ez_A_DIV"); var CSS = getCSS(Obj); alert(CSS.width);

Ilyen %-os eredményt ad vissza az IE6, illetve az Opera is, de FireFox meg egy kb. reális számmal tér vissza, ami meg egy 2 tizedes jegyű float szám (konkrétam azt írja ki, hogy "1003.47").

Amint látható FireFox a legígéretesebb (Math.floor()-ral könnyű elbánni vele), de IE6 és Opera nem hajlandó elárulni, hogy az a 100% az konkrétan mennyi pixelt takar.

A kérdés pedig az, hogy hogy tudom pixelre pontosan megállapítani egy %-kal meghatározott objektum szélességét (vagy bármi más tulajdonságát)? Vagy esetleg van -e erre valamilyen konverziós függvény?

Thx.
Mutasd a teljes hozzászólást!
Megvan a terület szélessége (az ablak mérete, vagy ugyan így lekérdezheted a szülő (parent) szélességét). A %-ből elhagyod a "%" jelet, a számmal szorozhatsz és osztod 100-al (meg kerekítesz)

Mutasd a teljes hozzászólást!

  • alert(document.getElementById('dividje').style.width)
    vagy document.getElementById('dividje').getAttribute('width')
    vagy document.getElementById('dividje').width
    vagy még csomó más ......

    ha ez megvan akkor képernyő szélessége screen.width-nek veszed azt a bizonyos %-át amit ez visszaad

    tehát ha 80% akkor screen.width*0.8=ilyen_szeles_pixelben

    vagy ha nem a képernyőben van, hanem pl egy table-ben akkor obj.parentNode.style.width vagy obj.parentNode.width vagy obj.parentNode.getAttribute('width')
    Mutasd a teljes hozzászólást!
  • tehát ha 80% akkor screen.width*0.8


    Ami ugye nem igaz, mert a 80% az az ablak 80%-a, nem pedig képernyőé.
    Mutasd a teljes hozzászólást!
  • oppá télleg :D akkor screen.AvailWidth?
    Mutasd a teljes hozzászólást!
  • Böngészőfüggő
    pl. IE alatt: document.body.clientWidth
    Mutasd a teljes hozzászólást!
  • "alert(document.getElementById('dividje').style.width)
    vagy document.getElementById('dividje').getAttribute('width')
    vagy document.getElementById('dividje').width"

    Mindebből egyik sem ad vissza eredményt (fentebb írtam, hogy miért).

    "vagy még csomó más ......"

    Például? Mert nekem ezeken, meg a class.property-n kívül nincs több ötletem.

    Mindeközben asszem meg van a megoldás, bár nem erre, hanem csak a problémámra. Azt, hogy egy %-ban megszabott pozíció mennyi is pontosan pixelben, azt eddig még nem tudtam (tudtuk) megoldani, de azt, hogy egy tetszőleges objektum left/top/width/height értékei pixelben lekérdezhetőek legyenek az immár megoldott dolog: offsetLeft/offsetTop/offsetWidth/offsetHeight. Bár elvileg ezek mind az ablakhoz képest relatívak, a valóságban azonban mindig a parent objetumhoz képest, ami nekem pont jó.

    A kérdés továbbra is él: % --> px
    Mutasd a teljes hozzászólást!
  • offsetWidth?
    Mutasd a teljes hozzászólást!
  • Épp most írtam, hogy ez megoldás a problémámra, de nem megoldása a kérdésnek.
    Mutasd a teljes hozzászólást!
  • Hat akkor nem ertelek. Megvan a megoldas, de nincs meg? A pixel az miota relativ? Vagy nem ertelek...
    Mutasd a teljes hozzászólást!
  • Nos valóban meg van a megoldás, de mivel én jöttem rá legelőször, így saját magam kelle megpontoznom, ehhez pedig nincs pofámon bőr... Ezért azt mondom, hogy bár a problémám megoldódott, de arra még mindig nincs válasz, hogy egy %-os pozíció hogyan _KONVERTÁLHATÓ_ konkrét pixelértékké. Aki erre legelőször ad megoldást (akár az offsetXXXXX-ek használatával mondjuk egy konverter függvényen belül), az megkapja az 50 pontot.
    Mutasd a teljes hozzászólást!
  • Megvan a terület szélessége (az ablak mérete, vagy ugyan így lekérdezheted a szülő (parent) szélességét). A %-ből elhagyod a "%" jelet, a számmal szorozhatsz és osztod 100-al (meg kerekítesz)

    Mutasd a teljes hozzászólást!
  • "Megvan a terület szélessége (az ablak mérete, vagy ugyan így lekérdezheted a szülő (parent) szélességét). A %-ből elhagyod a "%" jelet, a számmal szorozhatsz és osztod 100-al (meg kerekítesz)"

    Ez jó. Milyen számmal szorozzak? Hiszen pont ez a kérdés...
    Mutasd a teljes hozzászólást!
  • 20%-nál a 20-al.

    Pl. ha csak egy kép van a body-ban, akkor
    <body>
    <img src="..." width="20%" ..>
    </body>

    ablak méretet-et lekérdezed, megszorzod a fenti értékkel (% kjel nélkül), tehát 20-al és osztod 100-al.
    Mutasd a teljes hozzászólást!
  • Micu sztem ez megintcsak az a bizonyos 40% (amit egyik topicban írtál) és ahogy mondtad jó indulattal a 30%-ba esik bele
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • Nem, ez már legalább a 20%-os (vagy méginkább a 10%-os) kategória. A megoldás ugyanis mindig az ablakmérethez viszonyít, ami nem jó, mert ha egy bonyolultabb, összetettebb halazt képeznek az egymásba ágyazott (és így egymáshoz képest alár abszolútt és relatív eltolással) objektumok, akkor simán megdöglött az egész elmélet. Az meg azért eléggé abszúrd, hogy a böngésző a % értékből (és a környezeti viszonyokból) kiszámolja, hogy mannyi is a konkrét pixelérték, de a programozónak ezt nem adja tudtára, hanem annak elölről kell kezdenie a számolgatásokat. Nemá'... Itt azért ne tartsunk már!
    Mutasd a teljes hozzászólást!
  • részlet a prototype.js -ből

    getDimensions: function(element) { element = $(element); var display = $(element).getStyle('display'); if (display != 'none' && display != null) // Safari bug return {width: element.offsetWidth, height: element.offsetHeight}; // All *Width and *Height properties give 0 on elements with display none, // so enable the element temporarily var els = element.style; var originalVisibility = els.visibility; var originalPosition = els.position; var originalDisplay = els.display; els.visibility = 'hidden'; els.position = 'absolute'; els.display = 'block'; var originalWidth = element.clientWidth; var originalHeight = element.clientHeight; els.display = originalDisplay; els.position = originalPosition; els.visibility = originalVisibility; return {width: originalWidth, height: originalHeight}; }
    Mutasd a teljes hozzászólást!
  • A belső szinttől egy ciklussal végigmehetsz a legfelső szintig.

    De nem értem. Ha százalékot használsz, akkor minek a számérték? Ha megváltoztatom az ablak méretét (az oldal betöltése után), akkor úgy is más lesz.
    Mutasd a teljes hozzászólást!
  • "A belső szinttől egy ciklussal végigmehetsz a legfelső szintig."

    Igen tudom, de pont ezt az iszonyat lassú módszert lett volna jó elkerülni egy gyors konverziós függvénnyel.

    "Ha százalékot használsz, akkor minek a számérték?"

    Ez már egy teljesen más tészta. A lényeg az, hogy a szerveren használom fel az így megkapott értéket, amivel egy olyan képet generálok le, amely pontosan beleillik egy DIV-be (vagyis mérete pontosan megegyezik vele), így nem kell a képet kinyújtanom/összezsugorítanom. De mivel a felhasználó akármikor átméretezheti a böngésző ablakát, s így magát az oldalt is, ezért nem tudhatom előre, hogy mekkora képet kell csinálnom. Na ekkor jön jól, ha le tudom kérdezni egy adott DIV pontos méreteit. A generált kép egyébként egy nagyon részletes "bittérkép", melyből mindig csak annyira van szükség, mint amekkora helyre befér az. Ennyi.
    Mutasd a teljes hozzászólást!
  • http://daba.extra.hu/banderasz.html
    IE rendesen kiírja a pixelt (nálam) firefox a %-át írja ki
    ellenőrzöd hogy található-e benne % ha igen akkor: Math.round(böngésző szélessége/100*képszélességeszázalékjelnélkül)
    de ha így jó akkor micunak add a pontot mert ő ezt a számítást már egyszer leírta

    [szerk]
    itt egy mégjobb: http://daba.extra.hu/banderasz2.html
    [/szerk]
    Mutasd a teljes hozzászólást!
  • Nálam ezek jelennek meg:
    IE: "510"
    FF: "50%"
    Op: "-50"

    Nem tuti... Opera alatt -50 nem túl bíztató, és Safari alatt még ki sem próbáltam.

    Ám legyen ahogy kérted, megpontozom Micu-t, mert úgy látom nem lesz itt jobb megoldás. Bár __ToM_ a prototype.js-ből idézett, de ez mégsem az ő szerzeménye, és [R.T.F.M.] is csak ugyan azt mondta, amit én. Hogy lehetnég így igazságos???

    <Szerk>
    Látom, közben szerkesztetted. Na ez utóbbi már minhárom böngészőn hasonló eredményt ad.
    </Szerk>
    Mutasd a teljes hozzászólást!
  • a 2. html-t is nézd meg operával nem néztem csak ie6 meg ff 1.5

    és utóbbi az jó mer ha igen akkor bemásolom ide a forrást hogy megmaradjon legközelebbre :)
    Mutasd a teljes hozzászólást!
  • Az utóbbi jól műxik.
    Mutasd a teljes hozzászólást!
  • <html> <head> <title>banderasz2.html</title> <script type="text/javascript"> function banderasz(){ alert(document.getElementsByTagName('img')[0].width) } </script> <style type="text/css"> img{width:50%} </style> </head> <body onload="banderasz()" style="margin:0;overflow:hidden" bgcolor="#ece9d8"> <center> <br><br> <img src="http://hatterkepek.hu/hatterkepek/small/www/brumimaci/20050218_181720/linux-14.jpg"> </center> </body> </html>
    Mutasd a teljes hozzászólást!
  • akkor gyakorlatilag ellentmondtál most az elöző hozzászólásodnak (2007.11.08. 17:00) mivel ezt írtad:
    Mindebből egyik sem ad vissza eredményt (fentebb írtam, hogy miért).


    pedig köztük volt ez is
    Mutasd a teljes hozzászólást!
  • "pedig köztük volt ez is"

    Hol van ebben a forrásban egy DIV-re vonatkozó CSS class? Megmondom: Sehol. Olvasd el azt a topikot, ami a témaindító hozzászólásomban belinkeltem. Abban látni fogod, hogy tényleg nem ad vissza semmit sem eredményül, ha egy CSS osztály-beli tulajdonságot akarsz lekérdezni azzal a módszerrel, ahogy itt a forrásodban használod. Az ott úgy nem működik.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd