[JS] Problemen met uitlezen width.

zaterdag 28 juni 2008 23:51

Acties:

0 Henk 'm!

Snake

Los Angeles, CA, USA

Topicstarter

Hi,

Ik probeer een div uit te lezen, met name de width.

Deze wordt opgegeven via een nested stylesheet:

HTML:

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript">
            function test()
            {
                alert(document.getElementById("main").style.width);
            }
        </script>
        <style type="text/css">
            #main { width: 500px; color: #CCCCCC; } 
        </style>
    </head>
    <body>
        <div id="main">
            text
        </div>
        <form>
            <input type="button" value="klik" onclick="test();" />
        </form>
    </body>
</html>

Helaas krijg ik hierbij een leeg venstertje.

Ook als ik met Firebug helemaal debug, blijft het leeg.

Hoe moet dit? Want ik zit al de hele tijd te googlen, maar als ik op 'div no style width' zoek, kom ik meer codes van banners tegen als informatie.

Going for adventure, lots of sun and a convertible! | GMT-8

zaterdag 28 juni 2008 23:53

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Javascript

currentStyle/getComputedStyle moet je daarvoor gebruiken. Als alternatief zou je natuurlijk ook gewoon de offsetWidth van de div uit kunnen vragen.

Intentionally left blank

zaterdag 28 juni 2008 23:55

Acties:

0 Henk 'm!

frickY

De stijl is niet bekend in de DOM, alleen in CSS.

Ikzelf los dit over het algemeen op door een inline-style te gebruiken.
De oplossing van crisp is uiteraard netter.

zaterdag 28 juni 2008 23:55

Acties:

0 Henk 'm!

Snake

Los Angeles, CA, USA

Topicstarter

crisp schreef op zaterdag 28 juni 2008 @ 23:53:
currentStyle/getComputedStyle moet je daarvoor gebruiken. Als alternatief zou je natuurlijk ook gewoon de offsetWidth van de div uit kunnen vragen.

En waarom als ik vragen mag? Als ik de CSS inline zet, neemt hij het wel mee?

frickY schreef op zaterdag 28 juni 2008 @ 23:55:
De stijl is niet bekend in de DOM, alleen in CSS.

Ikzelf los dit over het algemeen op door een inline-style te gebruiken.
De oplossing van crisp is uiteraard netter.

Ah dit is het antwoord

Thx

[ Voor 31% gewijzigd door Snake op 28-06-2008 23:55 ]

Going for adventure, lots of sun and a convertible! | GMT-8

zondag 29 juni 2008 00:22

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Javascript

Snake schreef op zaterdag 28 juni 2008 @ 23:55:
[...]

En waarom als ik vragen mag? Als ik de CSS inline zet, neemt hij het wel mee?
[...]

Ah dit is het antwoord Thx

Mjah, waarom lelijke inline styles gaan gebruiken, als je het gewoon via computed/current style op kunt vragen. Zo werkt het nou eenmaal

Dan heb je tenminste een solide oplossing, ipv een pleister.

zondag 29 juni 2008 11:55

Acties:

0 Henk 'm!

Bozozo

Your ad here?

Let erop dat computedStyle / currentStyle het width property geeft zoals ingesteld in CSS. Dus '768px', '40em', of 'auto'. De echte breedte, incl paddings en borders, vind je met offsetWidth (in pixels).

Als je bijvoorbeeld de width op auto hebt staan, met een padding van 1em en een border van 1px, dan is het nog best een uitdaging om de width in pixels te achterhalen.

TabCinema : NiftySplit

maandag 30 juni 2008 03:33

Acties:

0 Henk 'm!

funkwurm

Bozozo schreef op zondag 29 juni 2008 @ 11:55:
Let erop dat computedStyle / currentStyle het width property geeft zoals ingesteld in CSS. Dus '768px', '40em', of 'auto'. De echte breedte, incl paddings en borders, vind je met offsetWidth (in pixels).

Als je bijvoorbeeld de width op auto hebt staan, met een padding van 1em en een border van 1px, dan is het nog best een uitdaging om de width in pixels te achterhalen.

Dat geld alleen voor currentStyle. getComputedStyle geeft je waardes in px, het is namelijk de berekende (computed) waarde tijdens het renderen, en de engine berekend aan de hand van 40em een aantal pixels die hij vervolgens op het scherm tovert.

currentStyle is de huidige (current) stijl die is ingesteld, hetzij via inline, hetzij via een extern stijlblad.

Onderwerpen