用inputElement.clientWidth来获得input元素的宽度

作者：我就是个世界发表于：2009-06-29

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Width</title>
<script type="text/javascript">
function $(id) {
    return document.getElementById(id);
}

window.onload = function () {
    var testInput = $('test');

    alert("Size: " + testInput.size);
    alert("Width: " + testInput.clientWidth);
};
</script>
</head>

<body>
<form id="testForm" action="#" method="post">
    <input type="text" id="test" size="20" />
</form>
</body>
</html>[/code]

input的size与width一定是有关联的，否则改变size的大小，其width不可能跟着改变，只是这种关联比较复杂。

经测试clintWidth至少与input的以下几个因素有关：
1、font-size:字体的大小；
2、font-family:字体的种类；
3、letter-spacing:字母间隔。
[separator]
而offsetWidth和scrollWidth除了与上述因素有关外，还与以下因素有关：
4、padding:填充大小；
5、border-width:边框宽度；

如果你想要获取通过size获取上述三个高度中的一种，你需要综合考虑以上情况~！
换算难度较大且不通用，在各参数不变的情况下有一个“固定增加值（用n表示）”和一个Width基数（用m表示，三种Width至少有不同的两个值），就会有：Width=m+size*n；

如果你只是想用获取input的Width，那么你可以根据需要选择使用clintWidth和offsetWidth或者scrollWidth中的一个，楼上已经给出了获取的一种方法！

这个问题可以再深入研究，找到m、n和相关属性的关系，那通过size获取Width也并不是不可行的，只是要看你的实际应用了！

size与width的转换除了字符和文本样式以外，还可能依赖于浏览器以及窗口系统。
因为input控件的具体绘制影响其实际大小。

如我上面的代码在IE7和FF3beta2pre分别得到的宽度是151和149。

所以通用并简单可行的办法仍然是通过获取元素的clientWidth、offsetWidth和scrollWidth，
根据需要自行选取。

一般情况下，
clientWidth = 内容区域宽度 + paddingLeft + paddingRight
一般指元素客户区，即内边框所围的矩形区域的宽度。
其中内容区域宽度就是可以通过 CSS width 指定的那个宽度。

offsetWidth = clientWidth + borderLeft + borderRight
是指元素外边框所围的矩形区域的宽度。

scrollWidth = max(clientWidth, 实际内容宽度 + paddingLeft)
是指元素客户区的可滚动宽度。

请发表您的评论