怎麽用javascript计算一段文字的宽度

JavaScript024

怎麽用javascript计算一段文字的宽度,第1张

<div class="a">文字写入其中</div>

<script>

$(function(){

   $(".a").width() // div保证padding, margin, 字间距等都为零。然后计算这个容器宽度即可。

})

</script>

现实世间里，一个物体的宽度是明确的、没有异议的，而在JS的世界里，却有好几种获取div宽度的方法，有时这些方法获取的结果是一致的，有时确不尽相同，这一度让我很困惑。

为了理解width，我们创建一个宽200、高100的div来辅助学习：

首先我先给上结论，之后我会用例子验证结论的正确性：

其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。

那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。

因此：

再用浏览器开发者工具(F12)的console验证，此时结论正确：

接着，我们给div加上左右padding(左右padding分别设为20px和30px)：

如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。

我们接着算现在各种方式的宽度：

验证：

我们再给div加上左右border(左右边框分别设为10px和15px)：

计算宽度：

验证：

最后，我们给div加上左右margin(左右margin分别设为16px和32px)：

计算宽度：

验证：

至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：

上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式 box-sizing:border-box 的时候， width:200px 的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：

验证：

此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。

1、js中获取当前屏幕宽度方法如下：

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth （包括边线的宽）

网页可见区域高： document.body.offsetHeight （包括边线的高）

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

2、js简介

js，是JavaScript的缩写，是一种直译式脚本语言，一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

avaScript是的源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。