conversion length en pixel

Version imprimable

10/01/2007, 10h26
nicerico

conversion length en pixel

Bonjour

est possible de connaitre la taille en pixel de ma variable

Code:

var txt = "njkfjdskljfklsjdfklsjkl";

ou bien de convertir txt.length en pixel

Merci
10/01/2007, 10h38
Gruik

Oui, en mettant ce texte dans une élément et en mesurant la taille de cet élément (clientWidth, clientHeight)

j'ai pas déja donné un code pour ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type='text/javascript'>
function getTextWidth(montexte){
 
var container=document.getElementById('texte')
container.innerHTML=montexte
 
return container.scrollWidth+" px"
}
 
</script>
</head>
 
<body onload='alert(getTextWidth(" ciucoiucoiu"))'>
<div id='texte' style="visibility:hidden:none;width:1px;overflow:auto;">a	zeazeaze az	e a</div>
 
 
 
</body>

ou alors une version prototype...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type='text/javascript'>
 
function init(){
String.prototype.textWidth=function(){
		var container=document.createElement('div');
		container.style.visibility='hidden';
		container.style.width='1px';
		container.id="magicdiv";
		document.body.appendChild(container);
		document.getElementById('magicdiv').style.overflow="auto";
		document.getElementById('magicdiv').innerHTML=this;
 
		return document.getElementById('magicdiv').scrollWidth
		}
 
}
</script>
</head>
 
<body onload='init()'>

s'utilise comme suit:

Code:

1
2
3
var tt='ldfsezrargdfg'		
alert(tt.textWidth())
}

on pourrait imaginer l'enrichir en passant en paramètre la police et la taille qu'il suffirait de concaténer dasn le ccsText ...

10/01/2007, 11h24
SpaceFrog

version enrichie :
http://www.developpez.net/forums/sho...54#post1654454

ou encore avec un display inline ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'>
function textWidth(mytext){
var testdiv=document.getElementById('test')
testdiv.innerHTML=mytext
return document.getElementById('test').offsetWidth +"px"
}
</script>
</head>
 
<body>
<div id="test" style="display:inline;visibility:hidden;position:absolute;z-index:100;"></div>
<input type='text' id='saisie' />
<input type='button' onclick="alert(textWidth(document.getElementById('saisie').value))" value='largeur pixels' />
</body>
</html>

10/01/2007, 15h44
nicerico

merci beaucoup^!!