使用jq获取文字的宽度
获取字符串的长度很简单,但是如何获取一个字符串的字体宽度却是一个不太好操作的问题,今天查阅了许多资料,终于找到了解决方法:
1.首先,需要添加一个标签,HTML代码如下:
<body>
<span></span>
</body>
2.接下来直接在String的原型中添加获取文字宽度的函数,在js代码中加入以下代码即可:
String.prototype.visualLength = function()
{
let ruler = $("span");
ruler.text(this);
return ruler[0].offsetWidth;
};
3.使用js来调用这个方法:
let text = "分";
let len = text.visualLength();
console.log(len);
效果如下:
记得要引入jq,博主使用的是es6
使用jq获取文字的宽度的更多相关文章
- js jq 获取网页元素宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- jq 获取元素的宽度时,如何取得小数部分
<!DOCTYPE html> <html> <head> <title></title> <meta name="arti ...
- iOS 重写UITableViewCell之动态获取label文字的宽度进行布局
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- Js与Jq 获取浏览器和对象值的方法
JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...
- js,jq获取元素位置属性及兼容性写法
网页被卷起来的高度/宽度 document.documentElement.scrolltop //火狐 和 其他浏览器 document.body.scrolltop //ie,谷歌浏览器和没有 ...
- jq获取鼠标位置
jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jq获取表单值与赋值代码
jq获取表单值与赋值代码 jq获取表单值与赋值代码 $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var ...
- JQuery或JavaScript获取网页的宽度、高等
最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...
- 获取UILabel上最后一个字符串的位置。获取文字长度和高度,自动换行
//行的高度. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPat ...
随机推荐
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- C#指南,重温基础,展望远方!(10)C#枚举
枚举类型是包含一组已命名常量的独特值类型. 需要定义包含一组离散值的类型时,可以定义枚举. 枚举使用一种整型值类型作为其基础存储, 并提供离散值的语义含义. 以下示例声明并使用名为“Color”的 e ...
- 关于python 中的 sys.argv 的使用方法
sys.argv是获取在cmd运行python文件的时候输入的命令行参数,呈现的数据结构是列表的格式 1.用pacharm时运行时的结果是: 输出结果: 2.当我在cmd中输入指令 debu ...
- [SDOI2016Round1]解题报告
Day1 T1: 题意:求∑n−1i=0∑m−1j=0max((i xor j)−k,0) 由于是抑或操作.每一位都是独立的,所以能够一位一位的算贡献. f[i][a][b][c]表示第i位时.每一个 ...
- Android自己定义截屏功能,相似QQ截屏
由于公司业务需求 须要对一个屏幕进行截屏.但自带的截屏功能是远远不够项目的功能需求 ,我们是做一个画板软件 .须要的像QQ那样截屏之后 ,能够看到我们自己定义的工具.有画笔,button等等 .and ...
- intelliJ IDEA 配置MySQL数据库 详解
1> 在主界面中,点击右边侧栏的 Database ,在点击 + ,再Data Source 选择数据库 2> 填入 Database 数据库名,在输入 User 和 Password ...
- C++知识点 笔试常见
C++知识点 一.#include “filename.h”和#include <filename.h>的区别 #include “filename.h”是指编译器将从当前工作目录上开 ...
- UIImageView的一些用法
转自:http://blog.sina.com.cn/s/blog_60e2dbcf01014bfm.html //初始化 UIImageView *imageView=[[UIImageView ...
- iOS第三方开源库的吐槽和备忘
转自:http://blog.ibireme.com/2013/09/23/ios-third-party-libs/#more-41361 由 ibireme 发表于 2013/09/23 做iOS ...
- Android实战简易教程-第二十三枪(基于Baas的用户注冊验证username是否反复功能!)
接上一篇,加入验证用户名是否已经注冊功能! 仅仅须要改动MainActivity.java: package com.example.logintest; import java.util.List; ...