提问人：Crownedpride 提问时间：7/28/2021 最后编辑：BeerusDevCrownedpride 更新时间：7/28/2021 访问量：304
如何使用html/css/jquery计算文本的确切高度/宽度？
How would one calculate the exact height/width of a text with html/css/jquery?
问：
我们最终希望让客户选择“最大字母高度”，这样他们就可以在 5 厘米、10 厘米、15 厘米、20 厘米等之间进行选择。通过选择字母高度，视觉示例应该相应地调整（尽管它必须按比例工作，因为我不希望文本离开屏幕）。选择高度后，客户端可以输入他们的文本，该文本应自动开始计算从像素到厘米的宽度。
在我构建的原型中，我让大部分工作，但像素到厘米并不精确，但我不知道该怎么做才能让它变得更好。我的原型可以在这里找到：https://codepen.io/Crownedpride/pen/d6b6973f458ecc0c60ed59b4bcfb5acd（请原谅荷兰语！
如果我不清楚，请告诉我，我一直在努力完成这项工作太久了，我像石头一样被卡住了。最后一件事，我的代码笔中还有一些其他代码，因为我试图将其转换为一个根据文本的宽度/高度计算价格的系统。
function priceCalc() {
// var cmHeight = $('.character-height-container').toCentimeters();
var cmLength = $('#characters').toCentimeters();
$('#output').text('Width: ' + cmLength.width + ' CM ' +
'Height: ' + cmLength.height + ' CM');
if(cmLength.width == 0){
$('#price').text("0");
} else if(cmLength.width < 50){
$('#price').text("30");
} else if(cmLength.width < 100){
$('#price').text("45");
} else if(cmLength.width < 150){
$('#price').text("60");
} else if(cmLength.width < 200){
$('#price').text("75");
} else if(cmLength.width < 250){
$('#price').text("90");
} else if(cmLength.width < 300){
$('#price').text("105");
} else if(cmLength.width < 350){
$('#price').text("120");
} else if(cmLength.width < 400){
$('#price').text("135");
} else if(cmLength.width < 450){
$('#price').text("150");
} else if(cmLength.width > 451){
$('#price').text("165");
};
}
(function($) {
$.fn.toCentimeters = function() {
var element = this,
width = parseInt(element.innerWidth()),
// width = parseInt(element.css('width')),
height = parseInt(element.innerHeight()),
// height = parseInt(element.css('height')),
centimeters = {};
centimeters.width = (width * 0.035 ); //-- scale
centimeters.height = (height * 0.02645833333333);
return centimeters;
};
}
)(jQuery);
$(function() {
var price = 0;
priceCalc();
});
$(function() {
$('#input-test').keyup(function() {
$('#characters').text($(this).val());
$('#total-characters').text($(this).val().length);
// var a = $('#breedte').text(($(this).val().length * 25));;
// $('#price').text(($(this).val().length * 25 * 0.70));
$inputs.each(applyStyles);
priceCalc();
});
});
var $target = $('#characters'),
$inputs = $('.mystyle :input'),
$target2 = $('#custom-text-container'),
$inputs2 = $('.my-background-style :input'),
applyStyles = function() {
$target.css(this.name, this.value);
$target2.css(this.name, this.value);
};
$inputs.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
});
$inputs2.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
}); /* #breedte:after {
content:" cm breedt";
} */
body {
text-align:center;
font-family:Arial;
}
#total-characters:after {
content:" karakters"
}
#price:before {
content:"€ ";
}
#price {
font-size:36px;
color:green;
font-weight:bold;
}
.character-height-container {
height:36px;
display:block;
margin:0px;
padding:0px;
/* background-color:#ed7703; */
}
#characters {
display:inline-block;
font-size:40px;
font-family:'arial';
overflow:hidden;
color:#333;
line-height:40px;
background-color:;
margin:0px;
padding:0px;
height:;
vertical-align:text-bottom;
}
#custom-text-container {
border:2px solid #c3c3c3;
padding:10px;
min-height:51px;
background-color:;
text-align:center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-characters">
<div id="custom-text-container">
<div class="character-height-container">
<p id="characters"></p>
</div>
</div>
<p id="total-characters">0</p>
</div>
<!-- <div class="display-characters">
<div id="custom-text-container">
<p id="characters"></p>
</div>
<p id="total-characters">0</p>
</div> -->
<div class="display-price">
<p id=output>Width: 0 cm Height: 0cm</p>
<p id="breedte"></p>
<p id="price">0</p>
</div>
<form action="">
<label for="test">Vul hier je tekst in</label>
<input type="text" class="text" id="input-test"><br><br>
<div class="mystyle">
<label for="font-size">Letter hoogte: </label>
<select name="font-size" id="font-size">
<option name="font-size" value="40px">40 px</option>
<option name="font-size" value="60px">60 px</option>
<option name="font-size" value="80px">80 px</option>
</select><br><br>
<label for="font-family">Kies een font: </label>
<select name="font-family" id="font-family">
<option name="font-family" value="arial">Arial</option>
<option name="font-family" value="arial black">Arial Black</option>
<option name="font-family" value="Helvetica Neue">Helvetica Neue</option>
<option name="font-family" value="courier">Courier</option>
<option name="font-family" value="Verdana">Verdana</option>
</select><br><br>
<label for="color">Kies een letter kleur: </label>
<select name="color" id="color">
<option name="color" value="Black">Black</option>
<option name="color" value="White">White</option>
<option name="color" value="Red">Red</option>
<option name="color" value="#ed7703">Oranje</option>
<option name="color" value="Green">Green</option>
<option name="color" value="Yellow">Yellow</option>
<option name="color" value="Blue">Blue</option>
</select>
</div><br>
<div class="my-background-style">
<label for="background-color">Kies een achtergrond kleur: </label>
<select name="background-color" id="background-color">
<option name="background-color" value="White">White</option>
<option name="background-color" value="Black">Black</option>
<option name="background-color" value="#f2edd3">Beige</option>
<option name="background-color" value="#d3ecf2">Licht blauw</option>
<option name="background-color" value="#f2d3ed">Licht roze</option>
<option name="background-color" value="#ad3434">Donker rood</option>
</select>
</div>
</form>答： 暂无答案
评论