JS怎么计算html标签里文字的宽度 

方法： 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;

　　　　目的为了不影响页面，只是用来放你要测的文字的宽度，得到目标文字的内容，大小和字体.放到如下方法就行了：
　　　　　　
1
2
3
4
5
6
7
8
9
String.prototype.visualLength = function(size,family)
    　　　　　　{
        　　　　var ruler = $("#ruler").css({
            　　　　"font-size":size || "inherit",
            　　"font-family":family || "inherit"
       　　　　 });
        　　ruler.text(this);
        　　return ruler.width();
   　　　　　 }

　实例如下：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
</head>
<style>
    #ruler {
        position:absolute;
        visibility: hidden;
        white-space: nowrap;
        z-index: -100;
    }
</style>
<body>
 
<span id="ruler">test</span>
<span >tasdfasdfasdfest</span>
<script src="./jquery.min.js"></script>
<script>
    String.prototype.visualLength = function(size,family)
    {
        var ruler = $("#ruler").css({
            "font-size":size || "inherit",
            "font-family":family || "inherit"
        });
        ruler.text(this);
        return ruler.width();
    }
    var text = "tasdfasdfasdfest";
    var len = text.visualLength("16px");
    console.log(len)
</script>
</body>
</html>

　　

 转：https://www.cnblogs.com/flxy-1028/p/7813836.html

posted @ 2022-03-12 14:20  rmticocean  阅读(212)  评论(0)    收藏  举报