关于JavaScript的各种width

clientWidth=contentWidth+padding,理解为:客户区宽度=正文宽度+内填充宽度,不包含滚动条的宽度,clientHeight同理。

offsetWidth=contentWidth+padding+border(即clientWidth+border),offsetWidth还真不知道叫什么宽度好,反正是多加了个边框宽度,也包括垂直滚动条的宽度,offsetHeight同理。

scrollWidth,对象滚动宽度,实际内容所占宽度,也就是滚动到底所形成的最大宽度,scrollHeight同理。

另外element.style.width只能获取或者设置行内样式里的高度,无法获取外部样式表里的width。

情况1:

元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。

scrollWidth=clientWidth,两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2:

元素的内容超过可视区,滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

时间: 2024-07-31 00:46:47

关于JavaScript的各种width的相关文章

JavaScript获取元素样式

原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:100px;">test</div> <script type="text/javascript"> window.onload=function(){ var oTest=document.getElementById("test"

#, about:blank,javascript:路径比较

试了一下在<a>,<img>,<iframe>中用#,about:blank和javascript: 代码如下: 1 <!Doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>下载</title&

JavaScript提高:003:easy UI实现tab页面自适应问题

前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477不过有一个问题,div的宽度太宽了,而且不随页面变化而改变.网上搜索了下,发现很多人也碰到过,而且也有解决的办法.下面看看吧.实现tab的部分代码如下:引用的easyui文件参考上文. <div id="tabTop" class="easyui-tabs"> &

JavaScript提高:005:ASP.NET使用easyUI TABS标签显示问题

前面使用easy ui来实现了一个tabs标签(http://blog.csdn.net/yysyangyangyangshan/article/details/38307477),不过在ASP.NET中使用时发现了一个问题. 大家都知道,asp.net页面的控件,当控件的事件不是使用 "return js函数();"时,或者控件注册的是后台的事件,那么整个页面会重新加载的.此时这个easy ui实现的tabs标签,总是回到了第一个tab页.虽然可以借助ajax和jQuery的方法,来

JavaScript技巧手册

js小技巧 每一项都是js中的小技巧,但十分的实用! 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号&q

网页加载进度条的实现

本次主要介绍一下网页加载进度的实现.如下图,在页面加载的时候,上方红色的进度条 网页加载进度的好处是能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我

easyui 1

jquwry-easyui:基于jquery库的一个页面集合插件 用来实现b/S结构富客户段注意:一般用在企业级开发或者是互联网项目后台管理项目 不适合做网站前台页面 使用步骤1.在外部文件中使用五个样式文件三个js 两个css<script src="webfie/jquery.min.js"></script><script src="webfie/jquery.easyui.min.js"></script>&l

使用hovertree菜单作为后台导航

hovertree是一个jquery菜单插件,官方网址:http://keleyi.com/jq/hovertree/ ,可以登录该网址体验效果. 0.1.3版本:http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件: http://keleyi.com/jq/hovertree/css/jquery.hovertree.0.1.3.min.css http://keleyi.com/jq/hovertree/js/

调用百度地图

偶也能做百度地图了,嘻嘻,赞一个,废话不多说,代码敬上: 这个简单的样式:强大了可以自己改的 <style type="text/css">    .iw_poi_title {        color: #CC5522;        font-size: 14px;        font-weight: bold;        overflow: hidden;        padding-right: 13px;        white-space: now