1. clientWidth;　　内容宽度Width+左右填充padding
  2. clientHeight;　　内容高度height+上下填充padding
  3. clientLeft;　　左边框的宽度相当于border-left
  4. clientTop;　　上边框的宽度相当于border-top
  5. offsetWidth;　　clientWidth+左右边框
  6. offsetHeight;　　clientHeight+上下边框
  7. scrollHeight;　　真实内容宽度+上填充padding
  8. scrollWidth;　　真实内容宽度+左填充padding
  9. scrollLeft;　　滚动条卷去的宽度
  10. scrollTop;　　滚动条卷去的高度
关于操作浏览器本身的盒子模型信息
  1. clientWidth、clientHeight、 表示浏览器可视窗口的宽高
  2. scrollWidth、scrollHeight、 表示浏览器真实页面的宽高

js中盒子模型常用的属性你还记得几个？的更多相关文章

  1. css中盒子模型与box-sizing属性

    盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...

  2. js中Math对象常用的属性和方法

    1 Math对象 1.1定义:Math是js的一个内置对象,它提供了一些数学方法. 1.2特性:不能用构造函数的方式创建,无法初始化,只有静态属性和方法 1.3静态属性 1.3.1 Math.PI 圆 ...

  3. DOM盒子模型常用属性client，offset和scroll

    JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...

  4. CSS中的盒子模型与 box-sizing 属性

    盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...

  5. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  6. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  7. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  8. JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法

    JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...

  9. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

随机推荐

  1. PHP header( ) 禁止页面后退

    header("Cache-control:no-cache,no-store,must-revalidate"); header("Pragma:no-cache&qu ...

  2. 3.IP协议，ARP协议，RARP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...

  3. js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

    桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta ch ...

  4. jq操作radio，设置选中、获取选中值

    <label><inputtype="radio"name="sex"value="1">男</label&g ...

  5. session的一些方法

    session的一些方法: package com.stono.servlet.listenerorder; import java.io.IOException; import java.io.Pr ...

  6. Flex Socket 安全沙箱问题解决

    Flex使用Socket与C++通讯时遇到了安全沙箱问题,NND,折腾我半天,这是我的解决方法: 1):策略文件与主套接字在同一端口,只需调用 Socket.connect() 或 XMLSocket ...

  7. Request中的方法调用

    几种方法的调用: package com.stono.servlet; import java.io.IOException; import java.util.Enumeration; import ...

  8. AngularJS的五个超酷特性

    AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它 ...

  9. HDU 4570(区间dp)

    E - Multi-bit Trie Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  10. 简单js

    js是一门弱类型的语言,要是你学过c/c++,那么上手js是一件简单的事情. js的变量是通过 var 来声明的.例如:声明一个变量 num 是这样的: var num; 我们也可以直接用 num , ...