说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框)。那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型。

css样式

body {
margin:;
padding:;
} .box {
position: absolute;
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;
border: 10px solid #000;
line-height: 25px;
}

html结构

<div class="box" id="box">
前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型
</div>

1.client系列

clientWidth/clientHeight  如果不设置容器的宽高,用内边距撑开,获取的是内容的实际宽高加上内边距。如果设置宽高,则高度就是设置的宽高加上内边距。

clientLeft/clientTop  边框的宽度

 var box=document.getElementById("box");
console.log(box.clientWidth); //
console.log(box.clientHeight); //
console.log(box.clientLeft); //
console.log(box.clientTop); //

2.offset系列

offsetWidth/offsetHeight (clientWidth+clientLeft*2),(clientHeight+clientTop*2)

offsetLeft/offsetTop 相对父级盒子的外边距

offsetParent 盒子的父级盒子

 console.log(box.offsetWidth); //
console.log(box.offsetHeight); //
console.log(box.offsetLeft); //
console.log(box.offsetTop); //
console.log(box.offsetParent); //body

3.scroll系列

scrollWidth/scrollHeight 如果内容没有溢出,值和clientWidth/clientHeight一样。如果内容溢出:

scrollWidth:实际溢出内容宽度+左填充

scrollHeight:实际溢出内容高度+上填充

scrollTop: 滚动条卷去的高度

scrollLeft: 滚动条卷去的宽度

 console.log(box.scrollWidth); //
console.log(box.scrollHeight); //
console.log(box.scrollTop); //
console.log(box.scrollLeft); //

获取,设置浏览器盒子模型信息兼容写法

document.documentElement.clientWidth||document.body.clientWidth

封装一个函数获取设置盒子模型

 function win(attr, value) {
if(typeof value === "undefined") {
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
}

这就是js中的盒子模型,在开发中常常会用到,而且这几个属性很容易记混淆,要经常练习,才能熟练掌握,明天就是中秋节了,在这里预祝大家中秋节快乐!!!

<div class="box" id="box">前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型 前端学习之路之JS盒子模型</div>

js中的盒子模型的更多相关文章

  1. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  2. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  3. CSS中的盒子模型详解

    很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...

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

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

  5. 【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式

    目录 一. 方案1:ThreeBSP.js或ThreeCSG.js扩展库 二. 方案2:平面镂空模型拉伸 三. 方案3:Cinema 4D建模后输出模型文件 示例代码托管在:http://www.gi ...

  6. css中的盒子模型是什么?

    什么是CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周 ...

  7. three.js中的矩阵变换(模型视图投影变换)

    目录 1. 概述 2. 基本变换 2.1. 矩阵运算 2.2. 模型变换矩阵 2.2.1. 平移矩阵 2.2.2. 旋转矩阵 2.2.2.1. 绕X轴旋转矩阵 2.2.2.2. 绕Y轴旋转矩阵 2.2 ...

  8. css3中的盒子模型

    1.示例一 实现左右布局,左侧宽度200px,右侧自适配 代码如下: <!DOCTYPE html> <html lang="en"> <head&g ...

  9. 关于js盒子模型的知识梳理

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

随机推荐

  1. 【bzoj3195】 Jxoi2012—奇怪的道路

    http://www.lydsy.com/JudgeOnline/problem.php?id=3195 (题目链接) 题意 一张$n$个点$m$条边的无向图,每个点度数为偶数,一个点只能向标号与它的 ...

  2. Button 或 ImageButton 背景设为 透明 或半透明 (转)

    半透明<Button android:background="#e0000000" ... /> 透明<Button android:background=&qu ...

  3. php 百家姓

    private $surname = array('赵','钱','孙','李','周','吴','郑','王','冯','陈','褚','卫','蒋','沈','韩','杨','朱','秦','尤' ...

  4. unity生成Android apk

    前提:本文默认你安装了unity5.6版本,不是这个版本的没有Gradle(new)选项,也默认你安装了Android Studio并配置好了环境变量. Gradle(new):打包Android S ...

  5. spring cloud-zuul的Filter详解(十一)

    本文转自:http://blog.csdn.net/liuchuanhong1/article/details/62236793 关于网关的作用,这里就不再次赘述了,我们今天的重点是zuul的Filt ...

  6. PhantomJS的替代品--无头浏览器(Headless Chrome)

    在使用PhantomJS时候,出现提示: UserWarning: Selenium support for PhantomJS has been deprecated, please use hea ...

  7. Python高手之路【四】python函数装饰器,迭代器

    def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...

  8. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  9. Ansible3: ansible.cfg配置说明

    常用配置 Ansible默认安装好后有一个配置文件/etc/ansible/ansible.cfg,该配置文件中定义了ansible的主机的默认配置部分,如默认是否需要输入密码.是否开启sudo认证. ...

  10. koa中间件机制

    Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架. koa2利用的是async/await,洋葱圈模型. 1. koa2中间件基本用法