您的位置：首页 > Web前端 > JavaScript

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

2012-08-20 17:33 330 查看
公共部分

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航