说到盒子模型,你第一时间会想到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. linux内核分析 第六周 分析Linux内核创建一个新进程的过程

    进程的描述 操作系统的三大管理功能:进程管理.内存管理.文件系统 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. 进程控制块PCB task_struct:进 ...

  2. 滴滴打车CTO张博:生死战役,技术和时间赛跑

    三款产品背后的架构变迁 滴滴打车成立初衷是为了解决司机与乘客之间的信息不对称的问题,通过移动互联网和智能手机来打破信息的壁垒.从打车到专车再到顺风车,滴滴打车三款产品的背后是架构的挑战和系统的变迁. ...

  3. qsort和sort

    sort()函数是C++中的排序函数其头文件为:#include<algorithm>头文件: qsort()是C中的排序函数,其头文件为:#include<stdlib.h> ...

  4. 【Asp.net入门06】第一个ASP.NET 应用程序-案例说明

    创建简单的应用程序 本章的剩余部分将探讨一些用于创建简单的数据输入应用程序的基本ASP.NET功能.在这一节中,我们将加快进度——目标是演示ASP.NET的用法,因此将略过有关后台运行机制的详细说明. ...

  5. unity还原three——顶点,三角面,uv

    public class Geometry { public Geometry(string name, Data data, Hashtable hash) { Debug.Log("解析 ...

  6. (转) linux下vim和bash配置文件

    1.注释版  ~/.vimrc "去掉讨厌的有关vi一致性模式,避免以前版本的一些bug和局限 set nocompatible set autoread " 文件修改之后自动载入 ...

  7. RACCommand中的信号

    示例: RACSignal* textSignal = [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscri ...

  8. 2017 清北济南考前刷题Day 6 morning

    T1 贪心 10 元先找5元 20元 先找10+5,再找3张5 #include<cstdio> using namespace std; int m5,m10,m20; int main ...

  9. HDU 2594 KMP

    题目链接 题意:给定两个字符串s1,s2,求最长的s1前缀s使得s为s2的最长后缀,输出该字符串和其长度. 题解:调换s1和s2的顺序,用KMP求解即可. #include <bits/stdc ...

  10. 1.phpcms 伪静态

    location / { if (!-f $request_filename){ rewrite (.*) /index.php; } rewrite ^/caipu-([-]+)-([-]+)-([ ...