时间戳

首页 > 解决方案 > 根据 CSS 测量文本宽度而不渲染它

javascript - 根据 CSS 测量文本宽度而不渲染它

问题描述

我想测量一些待渲染文本的理论宽度。

我喜欢这种获取文本宽度的方法，因为它不会改变 DOM

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

我有字体的 CSS 描述

.dx-widget {
    color: #333;
    font-weight: 400;
    font-size: 14px;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    line-height: 1.35715;
}

如何根据这些 CSS 规则在 JavaScript 中获得不同字符串的宽度？

我认为我不能将这个 CSS 类应用到画布上以使其工作。

标签： javascripthtmlcsscanvas

解决方案

好的。我创建了一个片段。

通过将虚拟元素样式（或真实元素的样式）分配给变量，更容易更正代码。在任何浏览器的开发人员工具的控制台中，您都可以输入变量的名称并查看所有属性。

测试，如果它适合你-使用它;）

或者正如斯蒂芬 P 在评论中建议的那样——创建一个新的空跨度，你不必冒险改变一些真正的可见元素:)

投票他的评论。这是很大的进步。

var stylee=document.getElementById('test_element').style;
stylee.color="#333";
stylee.fontWeight="400";
stylee.fontSize="14px";
stylee.fontFamily='"Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif';
stylee.lineHeight="1.35715";

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

document.getElementById('result').innerText=getTextWidth('some text or variable', stylee);
<span id="test_element"></span>
<div id="result"></div>

推荐阅读