内容正在载入中,请稍后……
公告
About me
搜索
统计
其他
29 Jun.2009

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

作者: 我就是个世界   分类:技术&学习 » 网页设计   出处:本站原创            | |

<!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>


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

经测试clintWidth至少与input的以下几个因素有关:
1、font-size:字体的大小;
2、font-family:字体的种类;
3、letter-spacing:字母间隔。

而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)
是指元素客户区的可滚动宽度。 分享到QQ空间
时间:19:29 评论(0) 引用(0) 阅读(2248) Tags: , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情