width，clientWidth，offsetWidth
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oDiv = document.getElementById('div1'); /*
width height
style.width : 样式宽
clientWidth : 可视区宽
offsetWidth : 占位宽
*/ alert( oDiv.style.width ); //100
alert( oDiv.clientWidth ); //样式宽 + padding 120
alert( oDiv.offsetWidth ); //样式宽 + padding + border 可视区宽 + 边框 122 }
</script>
</head> <body>
<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
</body>
</html>
height
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oDiv = document.getElementById('div1'); /*
width height
style.height : 样式高
clientHeight : 可视区高
offsetHeight : 占位高
*/ alert( oDiv.style.height ); //100
alert( oDiv.clientHeight ); //样式高 + padding 120
alert( oDiv.offsetHeight ); //样式高 + padding + border 可视区高 + 边框 122 }
</script>
</head> <body>
<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
</body>
</html>
width，clientWidth，offsetWidth的更多相关文章
- 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别
一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
- 宽度总结-scrollWidth，clientWidth，offectWidth
平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些. 1.scrollW ...
- 关于offsetWidth，clientWidth,与jquery的width()方法
offsetWidth包括了边框的宽度, clientWidth只是元素的宽度, 当元素的"display"属性为“none”的时候,用offsetWidth(clientWidt ...
- 图解clientWidth，offsetWidth，scrollWidth，scrollTop
新手看到这几个属性,很头疼,参考了网上一些文章,加上自己实践,给出对这几个属性的解释 我把代码贴上来,方便大家验证 在chrome浏览器中,不知为什么图片容器高度比图片高度多了4px,把图片设置为bl ...
- 理解clientWidth，offsetWidth，clientLeft，offsetLeft，clientX，offsetX，pageX，screenX
1. clientWidth:表示元素的内部宽度,以像素计.该属性包括内边距,但不包括垂直滚动条(如果有).边框和外边距.(clientWidth = width + padding) 2. offs ...
- scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- JavaScript中的各种X，Y，Width，Height
在JavaScript DOM编程中,会接触很多很多很多关于浏览器的宽高,屏幕的宽高,元素的各种宽高,以及鼠标的坐标等,常常让人搞混.索性就写篇博客整理一下. case 1:鼠标的坐标 获取鼠标的坐标 ...
- jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
- [转]jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
随机推荐
- 在Salesforce中对某一个Object添加 Validation Rule
在Salesforce中可以对某一个Object添加相应的 Validation Rule 来进行一个全局的条件判断,比如满足什么样的条件的修改允许提交,不满足的要提示相应的错误信息. 要创建一个Va ...
- xUtils,butterknife...处理findviewbyid
在写android中,经常要出现大量的findviewbyid et_path = (EditText) findViewById(R.id.et_path); tv_info = (TextVi ...
- LayoutInflater(一)
相信接触Android久一点的朋友对于LayoutInflater一定不会陌生,都会知道它主要是用于加载布局的.而刚接触Android的朋友可能对LayoutInflater不怎么熟悉,因为加载布局的 ...
- loadrunner生成随机身份证和银行卡号
生成银行卡号码: Action() { char card[19] = {'6','2','2','7','0','0','0','0','0','0','0','0','0','0','0','0' ...
- Xamarin Android教程如何使用Xamarin开发Android应用
Xamarin Android教程如何使用Xamarin开发Android应用 在了解了Xamarin和Andriod系统之后,下面我们需要了解一下如何使用这些工具和系统来开发我们的应用程序. And ...
- [xsd学习]xsd介绍
一直以来项目中对xml格式的判断使用的都是dtd格式,直到最近才发现,不知何时都已经转为xsd来进行判断和校验,于是今天专门找资料看下,不得不说,对于这类资料的入门,w3cschool真是个不错的资料 ...
- webvnc利器-noVNC集成实战
我们在做一个虚拟机管理平台,底层虚拟化使用KVM,我们希望在网页上操作虚拟机. 一开始用applet嵌在网页内实现webvnc,不过由于applet的在浏览器上运行安全性限制,我们需要一个新的方案.此 ...
- linux 查看机器的cpu，操作系统等命令
看cpu信息,型号,几核 [root@f3 ~]# cat /proc/cpuinfo | grep name | cut -f2 -d:| uniq -c 16 Intel(R) Xeon(R) C ...
- 连连看[HDU1175]
连连看 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- [转]HDFS客户端的权限错误：Permission denied
搭建了一个Hadoop的环境,Hadoop集群环境部署在几个Linux服务器上,现在想使用windows上的Java客户端来操作集群中的HDFS文件,但是在客户端运行时出现了如下的认证错误. 错误的详 ...