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. ExcelUtil

    package cn.com.jansh.core.util; import org.apache.poi.hssf.usermodel.HSSFCell; import org.apache.poi ...

  2. permutation test

  3. JS 禁止刷新和右键

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. document.form.command.value

    问题:在一个JSP页面中需要多个提交按钮,每个按钮点击后需要把同一个form提交到不同的页面进行处理 解决:用JS. <html><head><title>一个表单 ...

  5. 采用highchart js+flot+rrd生成cpu、mem状态监控图

    HTML <script type="text/javascript" src="../static/js/jquery-1.8.0.min.js"> ...

  6. BOM总结

    一.BOM概念 BOM:Browser Object Model  浏览器对象模型,定义了JS操作浏览器的一些方法和属性 二.BOM方法 (在BOM里面大部分的方法都是调用window对象下的方法得到 ...

  7. xhtmlrenderer渲染pdf，中文换行

    在实际开发中,发现在table中显示中文,渲染出来的pdf,中文内容不自动换行.经过搜索发现了一种解决方案,如下: 重写Breaker,修改right计算方式 /* * Breaker.java * ...

  8. Android项目中打jar包 和 使用

    第一步,把普通的android project设置成库项目 库项目也是一个标准的android项目,因此你先创建一个普通的android项目. 这个项目可以起任何的名称,任何的报名,设置其他需要设置的 ...

  9. JavaScript原生的节点操作

    前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中 ...

  10. 在windows下安装运行disconf

    一.环境准备 1.下载disconf源码 (本文以2.6.36为例) https://github.com/knightliao/disconf 2.下载nginx1.10.2(windows版) h ...