Question

我试图获得键盘所有字符的宽度。我已经有了代码，但它显示的是整个元素的宽度。我使用的是本地安装的不同字体。但是，您可以修改font-family。代码错误地将宽度记录为1359.为什么？

PS：我正在检查谷歌浏览器浏览器。

<!DOCTYPE html>
<html>
<head>
    <style>
    @font-face{
        font-family: 'Source Code Pro';
        src: url('Monospace.ttf');
    }
    #checkChar {
        font-family: 'Source Code Pro';
        height: auto;
        font-size: 26px;
    }
    </style>
</head>
<body>

<h1>My First Heading</h1>
<div id="checkChar"></div>
<script>

   var charDiv=document.getElementById("checkChar");

   for(var i = 0 ; i<256; i++) {
    charDiv.innerHtml = String.fromCharCode(i);
        var style = getComputedStyle(charDiv,null);
        var charWidth = parseInt(style.width);
    console.log("i :"+i+"  value :  " + charDiv.innerHtml + " width of char : "+ charWidth);
    }   
</script>
</body>
</html>

Answer 1

您的代码有几个问题

~~首先，没有id =“charDiv”的元素~~
其次，id为charDiv的事实表明它是DIV（如果它存在的话） - 这是一个块元素 - 即它通常会尽可能宽是 - 使用SPAN（虽然ID可以是charDiv）
第三，它是innerHTML，而不是innerHtml
第四 - getComputedStyle无法获取您所需的信息 - 请改用getBoundingClientRect

继getComputedStyle之后。这将毫不奇怪地检索元素的计算样式。问题是，如果没有任何特定的width（或min-width或max-width）样式，则默认width的元素的auto。因此，它有点 Heisenberg - 有点 - 如果没有为元素width属性赋值，则无法获得可量化的计算宽度，但是给定width属性，然后检索指定的宽度，而不是角色的宽度。

下面的代码不包含您的字体，但解决方案是合理的（根据需要添加字体

var charDiv = document.getElementById("checkChar");

for (var i = 0; i < 256; i++) {
   charDiv.innerHTML = String.fromCharCode(i);
   var charWidth = charDiv.getBoundingClientRect().width;
   console.log("i :" + i + "  value :  " + charDiv.innerHTML + " width of char : " + charWidth);
}

#checkChar {
    height: auto;
    font-size: 26px;
}

<span id="checkChar"></span>

那应该输出你需要的东西

如何获得所有键盘字符的宽度？

1 个答案: