Toon posts:

[JS / CSS] Met javascript CSS width van div opvragen

Pagina: 1
Acties:

zaterdag 12 april 2003 21:43

Acties:

Verwijderd

Topicstarter
ik heb een probleem met het opvragen van de width van een Div.
Deze width is gedefinieerd in een stylesheet.

doe ik nu alert(OBJ.style.width); dan krijg ik een lege alert

voorbeeldje van de code:

<style type="text/css">
div{
position:absolute;
width:400px;
}
</style>

function init(){
alert(document.getELementById("div1").style.width);
}

<body onload="init()">

<div id="div1"></div>

</body>

---------------einde code-----------------

als ik de width in de tag definieer met "style=" dan werkt het wel!

bijv: <div id="div1" style="width:150;"></div>

doe ik nu --> alert(document.getElementById("div1").style.width);
Dan krijg ikwel keurig de width terug!!

rara, waar ligt dit nu weer aan :)

zaterdag 12 april 2003 21:49

Acties:

Verwijderd

Hint: L :P goed kijken... de fout staat er

[ Voor 3% gewijzigd door Verwijderd op 12-04-2003 21:49 ]

zaterdag 12 april 2003 22:00

Acties:
  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 17-08 14:00

MAZZA

Barbie is er weer!

Verwijderd schreef op 12 april 2003 @ 21:49:
Hint: L :P goed kijken... de fout staat er
Lastig altijd :) Je kan je er blind op staren ;) Maar in dit geval is dat niet de oplossing overigens :)

[ Voor 13% gewijzigd door MAZZA op 12-04-2003 22:03 ]

zaterdag 12 april 2003 22:03

Acties:

Verwijderd

Topicstarter
gordijnstok ik snap wat je bedoeld, dit is toevallig een overgetikt stukkie code, het is niet de gehele code, alleen die van belang, en ja ik heb document.getElementById vout getict.
:P:P
excuus excuus.....

browser, geeft geen error in de normale code, dus dit soort syntax fouten komen niet in de originele code terug.

wie o wie weet waar het aan kan liggen(afgezien van tik vouten)

zaterdag 12 april 2003 22:08

Acties:
  • MAZZA
  • Registratie: Januari 2000
  • Laatst online: 17-08 14:00

MAZZA

Barbie is er weer!

alert(document.getElementById('div1').offsetWidth);

:)

edit:

Werkt alleen niet met Mozilla?

[ Voor 38% gewijzigd door MAZZA op 12-04-2003 22:11 ]

zaterdag 12 april 2003 22:12

Acties:

Verwijderd

Topicstarter
ok, dat werkt,

wel wazig hoor.

waarom kan je de width property niet opvragen, aangezien hij
met width=500 wel de breedte van de div 500px lang wordt?!

zaterdag 12 april 2003 22:15

Acties:

Verwijderd

Topicstarter
alert(document.getElementById('div1').offsetWidth);

werkt in moz 1.3 en NS 6.2 zie ik net :)

zaterdag 12 april 2003 22:18

Acties:

Verwijderd

Width opvragen werkt wel, indien.... je deze in de style zet. Ik heb in het verleden me ook al eens verbaast over dit soort bugs.

zaterdag 12 april 2003 22:32

Acties:
  • RM-rf
  • Registratie: September 2000
  • Laatst online: 23:23

RM-rf

1 2 3 4 5 7 6 8 9

Verwijderd schreef op 12 april 2003 @ 22:12:
ok, dat werkt,

wel wazig hoor.

waarom kan je de width property niet opvragen, aangezien hij
met width=500 wel de breedte van de div 500px lang wordt?!
omdat die width een ge-inherite style is, via de class-attribute.
oftewel de width is onderdeel van de classdeclaratie, geen inline style.
je kunt in msie wel bv de currentStyle opvragen, maar offsetWidth blijft beter.
style.width retourneert enkel de via inline style-attribute gedefinieerde waardes

Mozilla ondersteunt overigens offsetWidth, -Height, -Top en -Left wel gewoon, ook al is het een MS extensie op level1 DOM en geen onderdeel van die standaard.
Mozilla ondersteund tevens CSS2's DOM-getComputedStyle()-methode, voor andere waardes dan positionering (top, left, width en height)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

zaterdag 12 april 2003 22:33

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 12 April 2003 @ 22:18:
Width opvragen werkt wel, indien.... je deze in de style zet. Ik heb in het verleden me ook al eens verbaast over dit soort bugs.
Dat zijn geen bugs; deze styles worden zeg maar 'inherited' vanuit de css rules; daaruit volgt uiteindelijk een zogenaamde 'computed style'. Het zijn dus niet direct properties van het object (tenzij inline opgegeven), en dus ook niet als zodanig op te vragen.

IE heeft de volgende method om de computed style te achterhalen:

JavaScript:
1
2

var el = document.getElementById('bla');
var computedWidth = el.currentStyle.width;


in NN6+ en Mozilla kan het op deze manier:

JavaScript:
1
2

var el = document.getElementById('bla');
var computedWidth = document.defaultView.getComputedStyle(el, '').getPropertyValue('width');


Opera kent geen methoden om dynamisch de computed style te achterhalen :o

Maar in het geval dat je alleen maar geinteresseerd bent in de hoogte, breedte of positie, dan voldoen offsetHeight, offsetWidth, offsetLeft en offsetTop prima in alle huidige browsers.

Edit: RM-rf, wil je voortaan iets langzamer typen? ;)

[ Voor 10% gewijzigd door crisp op 12-04-2003 22:36 ]

Intentionally left blank

zaterdag 12 april 2003 23:06

Acties:

Verwijderd

Tja, maar ik bedoel, zodra ik een class toeken aan een object, dan vind ik het erg vreemd dat het normaal is dat je dan de property niet kunt uitlezen. offsetWidth komt nl. niet altijd overeen met de width.

zaterdag 12 april 2003 23:31

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 12 April 2003 @ 23:06:
Tja, maar ik bedoel, zodra ik een class toeken aan een object, dan vind ik het erg vreemd dat het normaal is dat je dan de property niet kunt uitlezen. offsetWidth komt nl. niet altijd overeen met de width.
omdat de class een property is van het element, en de width weer een cssrule is binnen die class.
Daarnaast heb je ook nog overerving:
HTML:
1
2
3

<body style="color: blue">
<span id="eenSpan">Deze tekst is ook blauw</span>
</body>

En ik heb hierboven al de methoden laten zien om toch de uiteindelijk toegepaste stijl op te vragen; en dat Opera daarvoor geen mogelijkheden kent, tsja...

Dat de offsetWidth niet altijd overeenkomt met de echte breedte is het verschil in opvatting tussen de verschillende browsers of een border en padding wel of niet in de uiteindelijke breedte wordt meegerekent. Zoek maar eens op 'boxmodel' :)

Intentionally left blank

zaterdag 12 april 2003 23:34

Acties:

Verwijderd

crisp schreef op 12 April 2003 @ 23:31:
[...]

omdat de class een property is van het element, en de width weer een cssrule is binnen die class.
Daarnaast heb je ook nog overerving:
HTML:
1
2
3

<body style="color: blue">
<span id="eenSpan">Deze tekst is ook blauw</span>
</body>

En ik heb hierboven al de methoden laten zien om toch de uiteindelijk toegepaste stijl op te vragen; en dat Opera daarvoor geen mogelijkheden kent, tsja...

Dat de offsetWidth niet altijd overeenkomt met de echte breedte is het verschil in opvatting tussen de verschillende browsers of een border en padding wel of niet in de uiteindelijke breedte wordt meegerekent. Zoek maar eens op 'boxmodel' :)
Ik bedoelde daarmee inderdaad het boxmodel.

zaterdag 12 april 2003 23:45

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Verwijderd schreef op 12 april 2003 @ 23:34:
[...]
Ik bedoelde daarmee inderdaad het boxmodel.
En offsetWidth geeft keurig netjes de gerenderde breedte; als je bijvoorbeeld de offsetWidth van een
HTML:
1

<div style="width: 400px; border: 1px solid #000000">bla</div>

opvraagt, dan geeft Mozilla netjes 402 terug en IE 400; dan weet je toch meteen waar je aan toe bent? :)

Intentionally left blank

zondag 13 april 2003 00:10

Acties:

Verwijderd

Tuurlijk, maar ik vind de redenatie gewoon vreemd. Dus dat je met een class declaratie niet de properties kan opvragen (omdat deze aan het object class ipv object div hangen) en met een style declaratie wel. Het zou slimmer zijn geweest als ze dit wat beter hadden uitgewerkt :)
Pagina: 1
Reageer