<!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的更多相关文章

  1. 【clientX，offsetX，screenX】 【scrollWidth，clientWidth，offsetWidth】的区别

    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...

  2. 宽度总结-scrollWidth，clientWidth，offectWidth

    平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些. 1.scrollW ...

  3. 关于offsetWidth，clientWidth,与jquery的width()方法

    offsetWidth包括了边框的宽度, clientWidth只是元素的宽度, 当元素的"display"属性为“none”的时候,用offsetWidth(clientWidt ...

  4. 图解clientWidth，offsetWidth，scrollWidth，scrollTop

    新手看到这几个属性,很头疼,参考了网上一些文章,加上自己实践,给出对这几个属性的解释 我把代码贴上来,方便大家验证 在chrome浏览器中,不知为什么图片容器高度比图片高度多了4px,把图片设置为bl ...

  5. 理解clientWidth，offsetWidth，clientLeft，offsetLeft，clientX，offsetX，pageX，screenX

    1. clientWidth:表示元素的内部宽度,以像素计.该属性包括内边距,但不包括垂直滚动条(如果有).边框和外边距.(clientWidth = width + padding) 2. offs ...

  6. scrollWidth、clientWidth、offsetWidth、width的区别

    scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...

  7. JavaScript中的各种X，Y，Width，Height

    在JavaScript DOM编程中,会接触很多很多很多关于浏览器的宽高,屏幕的宽高,元素的各种宽高,以及鼠标的坐标等,常常让人搞混.索性就写篇博客整理一下. case 1:鼠标的坐标 获取鼠标的坐标 ...

  8. jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  9. [转]jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

随机推荐

  1. JDBC之——一个单线程JDBC基类和一些注意事项

    下面的一个DBase基类提供了一些jdbc的基本操作,配置文件的配置部分并不准确,只是在自己机器上的mysql中测试过.. 数据库的增删改方法中都在开始调用了getConnection方法,末尾调用了 ...

  2. Java学习随笔2：Java复合赋值表达式的小问题

    问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...

  3. 我的 Unity2D 屏幕适配

    以下方法纯属我YY,切勿当真!!! 确定一个设计尺寸,比如 devWidth = 960,devHeight = 640, 按照这个尺寸进行设计游戏. 方式一: 不管什么屏幕尺寸,都和设计的尺寸对应. ...

  4. POJ 2785 HASH

    题目链接:http://poj.org/problem?id=2785 题意:给定n行数字,每行4个数分别是a,b,c,d,现在要求能有多少个(a,b,c,d)组合并且和为0 思路:n^2统计所有(a ...

  5. WPF三种基本触发器与【与或】逻辑触发器

    wpf中的触发器是应用于程序界面模板.样式.皮肤.主题的基础.以下作为学习的记录. 1,三种基本触发器,属性触发器.数据触发器.事件触发器 属性触发器 <!--属性触发器--> <T ...

  6. ArrayList和Vector以及synchronizedList

    ArrayList和Vector都是使用数组方式存储数据 区别大概就是Vector本身所有方法都是用synchronized修饰的,所以线程安全,而ArrayList没有 还有一个区别就是新增元素的时 ...

  7. 【POJ2096】Collecting Bugs 期望

    [POJ2096]Collecting Bugs Description Ivan is fond of collecting. Unlike other people who collect pos ...

  8. PHP 将秒数转换成时分秒

    将秒数转换成时分秒,PHP提供了一个函数gmstrftime,不过该函数仅限于24小时内的秒数转换.对于超过24小时的秒数,我们应该怎么让其显示出来呢,例如 34:02:02 $seconds = 3 ...

  9. 20130625修改hbase的hbase-env导致导出器导出数据的速度变慢

    将hbase的 export HBASE_OPTS="-ea -XX:+UseConcMarkSweepGC -XX:+CMSIncrementalMode" 改为 export ...

  10. 【BZOJ】1104: [POI2007]洪水pow

    题意 给一个\(n * m(1 \le n, m \le 1000)\)的矩阵,如果\(a_{i, j}\)为正表示城市.\(|a_{i, j}|(|a_{i, j}| \le 1000)\)是格子\ ...