Connaitre le "width" d'un DIV contenant du texte sans le fixer
9 réponses
Choub
Bonjour,
Apr=E8s beaucoup de recherche, je n'arrive toujours pas =E0 compl=E9ter ce
bug.
Il s'av=E8re qu'en cr=E9ant un div avec document.createElement("div"),
puis en y ins=E9rant un texte, on ne peut pas connaitre la taille de ce
div avant de l'avoir ins=E9r=E9.
Soit.
Une fois qu'il est ins=E9r=E9, avec document.body.appendChild(div) par
exemple, je veux r=E9cup=E9rer la taille.
Je teste alors div.offsetWidth, qui ne fonctionne pas (retourne 0).
Comment r=E9cup=E9rer la taille d'un div avant son insertion (ou juste
apr=E8s) en Javascript ?
Comment récupérer la taille d'un div avant son insertion (ou juste après) en Javascript ?
ceci fonctionne avec mon Fx :
<html> <script type="text/javascript"> var ind=0; function newdiv(txt) { var div = document.createElement('DIV'); ind++; div.id = 'div_'+ind; div.style.position = 'absolute'; div.style.top = ind+'em'; div.innerHTML = txt; var cible = document.getElementById('insert'); cible.appendChild(div); alert('largeur = '+document.getElementById('div_'+ind).offsetWidth); } </script> <p><a href="#" onclick="newdiv('voici un nouveau div');return false;">div 1</a></p> <p><a href="#" onclick="newdiv('voici un autre div');return false;">div 2</a></p> <p id="insert" style="position:relative">ici les nouveaux divs :</p> </html>
-- Stephane Moriaux et son [moins] vieux Mac
Choub
Merci d'avoir répondu.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce que je souhaite, car je me suis mal exprimé. Je veux que le div ait la taille du texte qu'il contient, mais en lui fixant sa taille. Donc en fait, ça n'est pas comment connaître la taille du div, mais comment connaître la taille du texte qu'il contient, pour ensuite lui fixer la valeur en pixel.
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
Merci d'avoir répondu.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce
que je souhaite, car je me suis mal exprimé.
Je veux que le div ait la taille du texte qu'il contient, mais en lui
fixant sa taille.
Donc en fait, ça n'est pas comment connaître la taille du div, mais
comment connaître la taille du texte qu'il contient, pour ensuite lui
fixer la valeur en pixel.
Car par défaut, un div prend la taille de son conteneur, et cela me
pose problème car je veux réaliser le même effet que pour un objet
Label en Java.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce que je souhaite, car je me suis mal exprimé. Je veux que le div ait la taille du texte qu'il contient, mais en lui fixant sa taille. Donc en fait, ça n'est pas comment connaître la taille du div, mais comment connaître la taille du texte qu'il contient, pour ensuite lui fixer la valeur en pixel.
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
olivier
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
As-tu essayé display:inline-block ?
-- olivier
Car par défaut, un div prend la taille de son conteneur, et cela me
pose problème car je veux réaliser le même effet que pour un objet
Label en Java.
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
As-tu essayé display:inline-block ?
-- olivier
CrazyCat
olivier wrote:
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java. As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
-- Astuces informatiques: http://www.crazycat.info Tchattez en liberté: http://www.crazy-irc.net
olivier wrote:
Car par défaut, un div prend la taille de son conteneur, et cela me
pose problème car je veux réaliser le même effet que pour un objet
Label en Java.
As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
--
Astuces informatiques: http://www.crazycat.info
Tchattez en liberté: http://www.crazy-irc.net
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java. As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
-- Astuces informatiques: http://www.crazycat.info Tchattez en liberté: http://www.crazy-irc.net
ASM
Merci d'avoir répondu.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce que je souhaite, car je me suis mal exprimé. Je veux que le div ait la taille du texte qu'il contient, mais en lui fixant sa taille. Donc en fait, ça n'est pas comment connaître la taille du div, mais comment connaître la taille du texte qu'il contient, pour ensuite lui fixer la valeur en pixel.
ne reste qu'à faire une règle de 3 ... tu as la taille 'normale' du div tu réduis/agrandis la taille du caractère en fonction
<html> <script type="text/javascript"> var ind=0; function newdiv(txt,larg) { var div = document.createElement('DIV'); ind++; div.id = 'div_'+ind; div.style.position = 'absolute'; div.style.top = ind+'em'; div.style.fontSize = '2em'; div.innerHTML = txt; var cible = document.getElementById('insert'); cible.appendChild(div); div = document.getElementById('div_'+ind); div.style.fontSize = (2*larg/div.offsetWidth)+'em'; alert('largeur = '+div.offsetWidth); } </script> <p><a href="#" onclick="newdiv('voici un nouveau div',120);return false;"> div 1</a> </p> <p><a href="#" onclick="newdiv('voici un autre div',120);return false;"> div 2</a> </p> <p><a href="#" onclick="newdiv('autre div, largeur 150',150);return false;"> div 3</a> </p> <div id="insert" style="position:relative"> <p>ici les nouveaux divs :</p> </div> </html>
Car par défaut, un div prend la taille de son conteneur,
c'est selon ...
dans l'exemple les nouveaux divs sont en absolute la largeur du div s'adapte au contenu (au morceau de texte y inséré)
si les divs sont non positionnés ou positionnés en relative cette fois, en l'absence de largeur fixée, le div est de la largeur de l'écran moins les marges (et autres contraintes)
et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
sais pas c'que c'est ... je ne connais que le JavaScript.
-- Stephane Moriaux et son [moins] vieux Mac
Merci d'avoir répondu.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce
que je souhaite, car je me suis mal exprimé.
Je veux que le div ait la taille du texte qu'il contient, mais en lui
fixant sa taille.
Donc en fait, ça n'est pas comment connaître la taille du div, mais
comment connaître la taille du texte qu'il contient, pour ensuite lui
fixer la valeur en pixel.
ne reste qu'à faire une règle de 3 ...
tu as la taille 'normale' du div
tu réduis/agrandis la taille du caractère en fonction
<html>
<script type="text/javascript">
var ind=0;
function newdiv(txt,larg) {
var div = document.createElement('DIV');
ind++;
div.id = 'div_'+ind;
div.style.position = 'absolute';
div.style.top = ind+'em';
div.style.fontSize = '2em';
div.innerHTML = txt;
var cible = document.getElementById('insert');
cible.appendChild(div);
div = document.getElementById('div_'+ind);
div.style.fontSize = (2*larg/div.offsetWidth)+'em';
alert('largeur = '+div.offsetWidth);
}
</script>
<p><a href="#"
onclick="newdiv('voici un nouveau div',120);return false;">
div 1</a>
</p>
<p><a href="#"
onclick="newdiv('voici un autre div',120);return false;">
div 2</a>
</p>
<p><a href="#"
onclick="newdiv('autre div, largeur 150',150);return false;">
div 3</a>
</p>
<div id="insert" style="position:relative">
<p>ici les nouveaux divs :</p>
</div>
</html>
Car par défaut, un div prend la taille de son conteneur,
c'est selon ...
dans l'exemple les nouveaux divs sont en absolute
la largeur du div s'adapte au contenu (au morceau de texte y inséré)
si les divs sont non positionnés ou positionnés en relative
cette fois, en l'absence de largeur fixée, le div est de la largeur de
l'écran moins les marges (et autres contraintes)
et cela me
pose problème car je veux réaliser le même effet que pour un objet
Label en Java.
sais pas c'que c'est ... je ne connais que le JavaScript.
Effectivement cela marche, mais je me rend compte que ça n'est pas ce que je souhaite, car je me suis mal exprimé. Je veux que le div ait la taille du texte qu'il contient, mais en lui fixant sa taille. Donc en fait, ça n'est pas comment connaître la taille du div, mais comment connaître la taille du texte qu'il contient, pour ensuite lui fixer la valeur en pixel.
ne reste qu'à faire une règle de 3 ... tu as la taille 'normale' du div tu réduis/agrandis la taille du caractère en fonction
<html> <script type="text/javascript"> var ind=0; function newdiv(txt,larg) { var div = document.createElement('DIV'); ind++; div.id = 'div_'+ind; div.style.position = 'absolute'; div.style.top = ind+'em'; div.style.fontSize = '2em'; div.innerHTML = txt; var cible = document.getElementById('insert'); cible.appendChild(div); div = document.getElementById('div_'+ind); div.style.fontSize = (2*larg/div.offsetWidth)+'em'; alert('largeur = '+div.offsetWidth); } </script> <p><a href="#" onclick="newdiv('voici un nouveau div',120);return false;"> div 1</a> </p> <p><a href="#" onclick="newdiv('voici un autre div',120);return false;"> div 2</a> </p> <p><a href="#" onclick="newdiv('autre div, largeur 150',150);return false;"> div 3</a> </p> <div id="insert" style="position:relative"> <p>ici les nouveaux divs :</p> </div> </html>
Car par défaut, un div prend la taille de son conteneur,
c'est selon ...
dans l'exemple les nouveaux divs sont en absolute la largeur du div s'adapte au contenu (au morceau de texte y inséré)
si les divs sont non positionnés ou positionnés en relative cette fois, en l'absence de largeur fixée, le div est de la largeur de l'écran moins les marges (et autres contraintes)
et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java.
sais pas c'que c'est ... je ne connais que le JavaScript.
-- Stephane Moriaux et son [moins] vieux Mac
Bobe
CrazyCat nous a dit le 04.05.2006 17:37:
olivier wrote:
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java. As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
Par défaut, la largeur du span ne pourra pas être fixée (les boîtes en-ligne n'acceptent pas les spécifications de largeur et hauteur notamment).
-- Aurélien Maille
CrazyCat nous a dit le 04.05.2006 17:37:
olivier wrote:
Car par défaut, un div prend la taille de son conteneur, et cela me
pose problème car je veux réaliser le même effet que pour un objet
Label en Java.
As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
Par défaut, la largeur du span ne pourra pas être fixée (les boîtes
en-ligne n'acceptent pas les spécifications de largeur et hauteur
notamment).
Car par défaut, un div prend la taille de son conteneur, et cela me pose problème car je veux réaliser le même effet que pour un objet Label en Java. As-tu essayé display:inline-block ?
ou, pourquoi pas un span?
Par défaut, la largeur du span ne pourra pas être fixée (les boîtes en-ligne n'acceptent pas les spécifications de largeur et hauteur notamment).
-- Aurélien Maille
Choub
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
J'ai pas encore trouvé la solution adéquate.. ..
En fait, c'est l'inverse que je veux. :D
Ne pas fixer la taille du div au moment de l'insertion, mais que la
taille soit calculée et fixée après automatiquement en fonction de
la taille du texte.
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
J'ai pas encore trouvé la solution adéquate.. ..
ASM
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
si c'est la largeur qui est à fixer "automatiquent" position: absolute; si c'est la hauteur qui est à fixer "automatiquent" position: relative;
J'ai pas encore trouvé la solution adéquate.. ..
Le compliqué est de placer le nouveau div (top et left) s'il est en absolute.
<html> <script type="text/javascript"> var ind=0; function newdiv(txt) { var div = document.createElement('DIV'); ind++; div.id = 'div_'+ind; div.style.position = 'absolute'; div.style.top = ind+'em'; div.innerHTML = txt; var cible = document.getElementById('insert'); cible.style.height = (ind*1+1*1)+'em'; cible.appendChild(div); alert('largeur = '+div.offsetWidth); } </script> <p><a href="#" onclick="newdiv('voici un nouveau div');return false;"> div 1</a> </p> <p><a href="#" onclick="newdiv('autre div');return false;"> div 2</a> </p> <p><a href="#" onclick="newdiv('voici encore un autre div');return false;"> div 3</a> </p> <div id="insert" style="position:relative"> <p>ici les nouveaux divs :</p> </div> </html>
sorte de demo pour 'relative' : http://perso.wanadoo.fr/stephane.moriaux/truc/cadre/
-- Stephane Moriaux et son [moins] vieux Mac
En fait, c'est l'inverse que je veux. :D
Ne pas fixer la taille du div au moment de l'insertion, mais que la
taille soit calculée et fixée après automatiquement en fonction de
la taille du texte.
si c'est la largeur qui est à fixer "automatiquent" position: absolute;
si c'est la hauteur qui est à fixer "automatiquent" position: relative;
J'ai pas encore trouvé la solution adéquate.. ..
Le compliqué est de placer le nouveau div (top et left) s'il est en
absolute.
<html>
<script type="text/javascript">
var ind=0;
function newdiv(txt) {
var div = document.createElement('DIV');
ind++;
div.id = 'div_'+ind;
div.style.position = 'absolute';
div.style.top = ind+'em';
div.innerHTML = txt;
var cible = document.getElementById('insert');
cible.style.height = (ind*1+1*1)+'em';
cible.appendChild(div);
alert('largeur = '+div.offsetWidth);
}
</script>
<p><a href="#"
onclick="newdiv('voici un nouveau div');return false;">
div 1</a>
</p>
<p><a href="#"
onclick="newdiv('autre div');return false;">
div 2</a>
</p>
<p><a href="#"
onclick="newdiv('voici encore un autre div');return false;">
div 3</a>
</p>
<div id="insert" style="position:relative">
<p>ici les nouveaux divs :</p>
</div>
</html>
sorte de demo pour 'relative' :
http://perso.wanadoo.fr/stephane.moriaux/truc/cadre/
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
si c'est la largeur qui est à fixer "automatiquent" position: absolute; si c'est la hauteur qui est à fixer "automatiquent" position: relative;
J'ai pas encore trouvé la solution adéquate.. ..
Le compliqué est de placer le nouveau div (top et left) s'il est en absolute.
<html> <script type="text/javascript"> var ind=0; function newdiv(txt) { var div = document.createElement('DIV'); ind++; div.id = 'div_'+ind; div.style.position = 'absolute'; div.style.top = ind+'em'; div.innerHTML = txt; var cible = document.getElementById('insert'); cible.style.height = (ind*1+1*1)+'em'; cible.appendChild(div); alert('largeur = '+div.offsetWidth); } </script> <p><a href="#" onclick="newdiv('voici un nouveau div');return false;"> div 1</a> </p> <p><a href="#" onclick="newdiv('autre div');return false;"> div 2</a> </p> <p><a href="#" onclick="newdiv('voici encore un autre div');return false;"> div 3</a> </p> <div id="insert" style="position:relative"> <p>ici les nouveaux divs :</p> </div> </html>
sorte de demo pour 'relative' : http://perso.wanadoo.fr/stephane.moriaux/truc/cadre/
-- Stephane Moriaux et son [moins] vieux Mac
YD
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
J'ai pas encore trouvé la solution adéquate.. ..
Dupliquer le div en question en lui ajoutant les attributs de style : position: absolute; visibility: hidden;
où 'label' est l'id du champ à redimensionner et 'invisible' celui qui sert à calculer la largeur.
Bien sûr si le nombre d'éléments/de pages où il est nécessaire de procéder ainsi le justifie, cela peut être entièrement fait par DOM/Javascript, en recherchant dans les DIV (document.getElementsByTagName('DIV')) ceux qui ont une certaine classe, en les clonant (cloneNode()), en leur ajoutant la classe 'invisible', en les insérant dans le flux HTML, en calculant leur largeur, et enfin en les supprimant.
HTH -- Y.D.
En fait, c'est l'inverse que je veux. :D
Ne pas fixer la taille du div au moment de l'insertion, mais que la
taille soit calculée et fixée après automatiquement en fonction de
la taille du texte.
J'ai pas encore trouvé la solution adéquate.. ..
Dupliquer le div en question en lui ajoutant les attributs de style :
position: absolute;
visibility: hidden;
où 'label' est l'id du champ à redimensionner et 'invisible' celui qui sert à
calculer la largeur.
Bien sûr si le nombre d'éléments/de pages où il est nécessaire de procéder ainsi
le justifie, cela peut être entièrement fait par DOM/Javascript, en recherchant
dans les DIV (document.getElementsByTagName('DIV')) ceux qui ont une certaine
classe, en les clonant (cloneNode()), en leur ajoutant la classe 'invisible',
en les insérant dans le flux HTML, en calculant leur largeur, et enfin en les
supprimant.
En fait, c'est l'inverse que je veux. :D Ne pas fixer la taille du div au moment de l'insertion, mais que la taille soit calculée et fixée après automatiquement en fonction de la taille du texte.
J'ai pas encore trouvé la solution adéquate.. ..
Dupliquer le div en question en lui ajoutant les attributs de style : position: absolute; visibility: hidden;
où 'label' est l'id du champ à redimensionner et 'invisible' celui qui sert à calculer la largeur.
Bien sûr si le nombre d'éléments/de pages où il est nécessaire de procéder ainsi le justifie, cela peut être entièrement fait par DOM/Javascript, en recherchant dans les DIV (document.getElementsByTagName('DIV')) ceux qui ont une certaine classe, en les clonant (cloneNode()), en leur ajoutant la classe 'invisible', en les insérant dans le flux HTML, en calculant leur largeur, et enfin en les supprimant.
