Extjs-实用工具获取文本所占的高度和宽度 Ext.util.TextMetrices

最新推荐文章于 2019-01-16 11:29:42 发布

itlwc

最新推荐文章于 2019-01-16 11:29:42 发布

阅读量2.9k

点赞数 1

分类专栏： Extjs 文章标签：工具

本文链接：https://blog.csdn.net/itlwc/article/details/7887517

版权

Extjs 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

公共部分

<body>
  <div id='text'></div>
  <div id='result'></div>
</body>

1.可以获取页面上文本所占的高度和宽度

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	//createInstance创建一个实例
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	/*
    		getSize(),Ext自动得到id='text'这个标签上定义的CSS样式,并以此计算文本的大小
    		如果把我的坐标显示在标签中,坐标为宽61高18
    	*/
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;

	});
</script>

2.对于已经创建好的metrics实例

我们改变文本显示相关的CSS样式,可以使用bind(),它的参数是HTML上的标签,它将这个标签的CSS样式复制过来,用作计算下一次的计算文本的高度和宽度的依据

代码

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
    	var metrics = Ext.util.TextMetrics.createInstance('text');
    	var size = metrics.getSize('我的坐标');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
    	//复制CSS相关样式
    	metrics.bind('result');
    	var size = metrics.getSize('复制了CSS相关样式');
    	Ext.getDom('result').innerHTML += size.width + ',' + size.height;
	});
</script>

3.设置文本最大宽度

<script type='text/javascript' defer>  
   	Ext.onReady(function() {
	    var metrics = Ext.util.TextMetrics.createInstance('result');
	    //设置文本最大宽度
	    metrics.setFixedWidth(100);
	    var size = metrics.getSize('我的坐标');
	    Ext.getDom('result').innerHTML += size.width + ',' + size.height + '<br />';
	});
</script>

itlwc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Extjs-实用工具获取文本所占的高度和宽度 Ext.util.TextMetrices

公共部分 1.可以获取页面上文本所占的高度和宽度 Ext.onReady(function() { //createInstance创建一个实例 var metrics = Ext.util.TextMetrics.createInstance('text'); /* getSize(),Ext自动得到id='text'这个
复制链接

扫一扫