js中的盒子模型
说到盒子模型,你第一时间会想到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中的盒子模型的更多相关文章
- css中的盒子模型
css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型. 1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...
- CSS学习系列1 - CSS中的盒子模型 box model
css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距. 盒子模型有一个属性box-sizing属性来说明是否包括 ...
- CSS中的盒子模型详解
很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...
- CSS中的盒子模型与 box-sizing 属性
盒子模型是css中一个重要的概念,是开发网页必须要用的布局方法.盒子模型有两种,分别是标准 w3c 盒子模型和 ie 盒子模型. 标准 w3c 盒子模型:包括 magin(外边距).border(边框 ...
- 【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式
目录 一. 方案1:ThreeBSP.js或ThreeCSG.js扩展库 二. 方案2:平面镂空模型拉伸 三. 方案3:Cinema 4D建模后输出模型文件 示例代码托管在:http://www.gi ...
- css中的盒子模型是什么?
什么是CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周 ...
- 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 ...
- css3中的盒子模型
1.示例一 实现左右布局,左侧宽度200px,右侧自适配 代码如下: <!DOCTYPE html> <html lang="en"> <head&g ...
- 关于js盒子模型的知识梳理
盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...
随机推荐
- 【bzoj3195】 Jxoi2012—奇怪的道路
http://www.lydsy.com/JudgeOnline/problem.php?id=3195 (题目链接) 题意 一张$n$个点$m$条边的无向图,每个点度数为偶数,一个点只能向标号与它的 ...
- Button 或 ImageButton 背景设为 透明 或半透明 (转)
半透明<Button android:background="#e0000000" ... /> 透明<Button android:background=&qu ...
- php 百家姓
private $surname = array('赵','钱','孙','李','周','吴','郑','王','冯','陈','褚','卫','蒋','沈','韩','杨','朱','秦','尤' ...
- unity生成Android apk
前提:本文默认你安装了unity5.6版本,不是这个版本的没有Gradle(new)选项,也默认你安装了Android Studio并配置好了环境变量. Gradle(new):打包Android S ...
- spring cloud-zuul的Filter详解(十一)
本文转自:http://blog.csdn.net/liuchuanhong1/article/details/62236793 关于网关的作用,这里就不再次赘述了,我们今天的重点是zuul的Filt ...
- PhantomJS的替代品--无头浏览器(Headless Chrome)
在使用PhantomJS时候,出现提示: UserWarning: Selenium support for PhantomJS has been deprecated, please use hea ...
- Python高手之路【四】python函数装饰器,迭代器
def outer(func): def inner(): print('hello') print('hello') print('hello') r = func() print('end') p ...
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- Ansible3: ansible.cfg配置说明
常用配置 Ansible默认安装好后有一个配置文件/etc/ansible/ansible.cfg,该配置文件中定义了ansible的主机的默认配置部分,如默认是否需要输入密码.是否开启sudo认证. ...
- koa中间件机制
Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架. koa2利用的是async/await,洋葱圈模型. 1. koa2中间件基本用法