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. Linux用户和用户组管理总结

    Linux下和用户和用户组管理有关的配置文件: /etc/group Group account information. /etc/gshadow Secure group account info ...

  2. fiddler 路由设置

    REGEX:^http://data.51buy.com/biz/oppmsmobile/web/js/app/(.+)/(.+).js E:\svns\new\dev\webapp\data_ics ...

  3. js原生设计模式——2面向对象编程之闭包1

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. flex 事件注册和鼠标拖动

    flex 事件注册和鼠标拖动 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...

  5. 第一部分 代码组织概念，集成开发环境(IDE)

    代码组织概念 主要是代码文件,项目和解决方案. 解决方案(.sln)包含多个项目(.csproj),一个项目又包含多个文件(.cs). 集成开发环境(IDE): 由编辑.编译.调试,以及用户图形界面, ...

  6. bootstrap 树

    http://jsfiddle.net/jhfrench/GpdgF/ 把原文的i标签中的图标显示出来: 源码: <div class="tree well"> < ...

  7. html标签大全（2）

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

  8. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  9. angular表格分页

    <!doctype html> <html lang="en" > <head> <meta charset="UTF-8&qu ...

  10. Express与NodeJs创建服务器的两种方法

    NodeJs创建Web服务器 var http = require('http'); var server = http.createServer(function(req, res) { res.w ...