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 ...
随机推荐
- android应用程序如何调用支付宝接口
最近在做一个关于购物商城的项目,项目里面付款这块我选的是调用支付宝的接口,因为用的人比较多. 在网上搜索了以下,有很多这方面的教程,但大部分教程过于陈旧,而且描述的过于简单.而且支付宝提供的接口一直在 ...
- js String对象
字符串(String) 字符串(String)使用长度属性length来计算字符串的长度: 在字符串中查找字符串 字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置: 实例 ...
- JavaScript 之 document对象
对象属性document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)do ...
- 《DSP using MATLAB》示例Example4.13
代码: b = [1, 0, -1]; a = [1, 0, -0.81]; % [R, p, C] = residuez(b,a); Mp = (abs(p))' Ap = (angle(p))'/ ...
- hdu 4990 Reading comprehension 二分 + 快速幂
Description Read the program below carefully then answer the question. #pragma comment(linker, " ...
- delphi 时间格式操作
FormatDateTime('yyyy-mm-dd hh:nn:ss',Now) FormatDateTime('hh:mm:ss:zz',Now) if (TimeOf(now) < pub ...
- 实现点击不同的按钮加载不同的css
这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的css,这样可以确定点击的是哪个,由于每个按钮都是从后端数据库加载过来的,不仅是简简单单的用id或者是类名,用过this也不行: 前端加 ...
- jquery笔记（遍历）
祖先: $("selector").parent().css():返回被选元素的直接父元素,并调用css方法. $("selector").parents(). ...
- 在字符界面tty1~tty6中使用鼠标，并用其复制粘贴
1. 安装 无意间看到gpm这个服务可以让你在tty1~tty6 环境中使用鼠标. 先用 rpm -qa gpm 查看是否已经安装此服务,如果提示以安装,则可以直接开启: 否则就要通过 yum ins ...
- POJ3308 Paratroopers（最小割/二分图最小点权覆盖）
把入侵者看作边,每一行每一列都是点,选取某一行某一列都有费用,这样问题就是选总权最小的点集覆盖所有边,就是最小点权覆盖. 此外,题目的总花费是所有费用的乘积,这时有个技巧,就是取对数,把乘法变为加法运 ...