Met onderstaand script bereken ik eerst de hoogte en de breedte van de tekst "Voorbeeldtekst Lengte" in px.
Met deze afmetingen bereken ik dan de lengte in milimeter naargelang de hoogte die gekozen wordt in het vervolgkeuzelijstje.
De hoogte van de eerste berekening in px is echter niet correct.
De hoogte die je krijgt is deze van de blauwe of zwarte achtergrond wanneer je de tekst selecteert en niet van de tekst zelf.
Bijgevolg klopt de berekening van de lengte niet.
Iemand een idee hoe ik de hoogte krijg van de tekst zelf, of is dit niet mogelijk?
[JS]
function getAfm() {
var br=document.getElementById('tekst2').offsetWidth;
document.getElementById("lengte").value = br;
var hg=(document.getElementById('tekst2').offsetHeight);
document.getElementById("hoogte").value = hg;
var hmm;
var h = document.getElementById('Hoogte1').value;
if (h == "Hoogte: 15mm") { hmm = (15.00).toFixed(0) ;}
if (h == "Hoogte: 20mm") { hmm = (20.00).toFixed(0) ;}
var lg=hmm/hg;
lg=lg*br;
document.order.hoogtemm.value = lg.toFixed(0);
}
[/JS]
Met deze afmetingen bereken ik dan de lengte in milimeter naargelang de hoogte die gekozen wordt in het vervolgkeuzelijstje.
De hoogte van de eerste berekening in px is echter niet correct.
De hoogte die je krijgt is deze van de blauwe of zwarte achtergrond wanneer je de tekst selecteert en niet van de tekst zelf.
Bijgevolg klopt de berekening van de lengte niet.
Iemand een idee hoe ik de hoogte krijg van de tekst zelf, of is dit niet mogelijk?
[JS]
function getAfm() {
var br=document.getElementById('tekst2').offsetWidth;
document.getElementById("lengte").value = br;
var hg=(document.getElementById('tekst2').offsetHeight);
document.getElementById("hoogte").value = hg;
var hmm;
var h = document.getElementById('Hoogte1').value;
if (h == "Hoogte: 15mm") { hmm = (15.00).toFixed(0) ;}
if (h == "Hoogte: 20mm") { hmm = (20.00).toFixed(0) ;}
var lg=hmm/hg;
lg=lg*br;
document.order.hoogtemm.value = lg.toFixed(0);
}
[/JS]
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<SCRIPT SRC="Test.js"></SCRIPT>
</head>
<body>
<FORM NAME="order">
<div id="artikel4">
<label for="Hoogte1">Letterhoogte : </label>
<select name="ADDITIONALINFO6" id="Hoogte1" onchange="getAfm()">
<option value="kies" selected="selected" style="color:red">Kies een hoogte</option>
<option value="Hoogte: 15mm">15 mm</option>
<option value="Hoogte: 20mm">20 mm</option>
</select><br />
<input type="text" id="lengte" name="lengte" value="">lengte in px<br />
<input type="text" id="hoogte" name="hoogte" value="">hoogte in px<br />
<input type="text" id="hoogtemm" name="hoogtemm" value="">lengte in mm volgens de gekozen hoogte in mm<br />
<div class="voorbeeld2"><p><b id="tekst2" style="font-size:20pt; font-family:Arial">Voorbeeldtekst Lengte</b></p></div>
</FORM>
</body>
</html>
