js 盒子模型与盒子偏移量
js 盒子模型:
通过js中提供的一系列属性和方法获取页面中元素的样式信息值。
一、client系类—》只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置的高度,如果没设置,就采用自适应之后的高度)
(1)clientHeight / cilentWidth 内容的高度/宽度 加上 上下/左右填充值。
clientHeight = height + padding-top + padding-bottom
clientWidth = width + padding-left + padding-right
(2)clientLeft / clientTop 左/右边框的宽度
clientLeft = borderLeftWidth;
clientTop = borderTopHeight;
二、offset系类 只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置的高度,如果没设置,就采用自适应之后的高度)
(1)offsetHeight/offsetWidth 内容的高度/宽度 加上 上下/左右填充值 加上上下/左右边框。
offsetHeigh = clientHeight + 2clientTop;
offsetWidth = clientWidth + 2clientLeft;
(2)offsetParent 当前元素的父级参照物,在同一个平面中最外层的元素是它里面所有元素的父级参照物,一般来说body是所有元素的父级参照物,但是当脱离文档结构时父级参照物发生改变即通过position定位来实现
position:absolute; position:relative;position:fixed 都可以改变父级参照物
(3)offsetLeft/offsetTop 当前元素的外边框距离基于父级参照物内边框的偏移量
三、scroll系列
(1)scrollHeight/scrollWidth 只读属性不可设置
当容器内容没有溢出的时候和clientHeight/clientWidth 获取的值是一模一样的;
当容器内容有溢出的时候,获取的规则如下:
scrollWidth 真实内容宽度加上左填充
scrollTop 真实内容高度加上上填充
他们获取到的结果都是约等于的值,因为对于同一个浏览器设置overflow:hidden和不设置是有区别的,对于不同的浏览器获取到的值也是不同
(2)scrollLeft/scrollTop 既可读取也可以设置 滚动条卷去的宽度和高度
四、关于js盒子模型取值问题:通过这13个属性获取的值不可能出现小数,因为浏览器自动回进行四舍五入。
五、对于浏览器本身的盒子模型信息
clientWidth/clientHeight 是当前浏览器可视区域(一屏幕)的宽和高
scrollWidth/scrollHeight 当前页面的真实内容的宽和高(所有屏幕的宽和高即整个页面的高)是一个约等于的值;为兼容通过以下方式进行获取或者设置 document.documentElement[attr] || document.body[attr]
(1)获取浏览器的可视区域的宽或者高(一屏幕的宽或者高)
document.docementElement.clientWidth || document.body.clientWidth
document.docementElement.clientHeight || document.body.clientHeight
(2)设置浏览器滚动条卷去的高
document.documentElement.scrollTop= 0;
document.body.scrollTop = 0;
六、获取页面元素中的某一个具体的样式属性值
(1)元素.style.属性名 // box.style.height
弊端:只能获取定义了的行内样式的属性值,不能获取样式变中定义的样式属性值(无法实现css和html的分离);
(2)window.getComputedStyle这个方法获取浏览器计算过得所有的样式,没有定义的样式也能获取到;
window.getComputedStyle(当前要操作的元素对象,当前元素的伪类【一般不写伪类写null】) 获取的结果是CSSStyleDeclaration 这个类的一个实例:包含了当前元素的所有样式集合。
window.getComputedStyle(box,null)["height"];
弊端:在IE6-IE8不兼容,但是在IE6-IE8下使用currentStyle来获取浏览器计算过得所有的样式;
元素.currentStyle box.currentStyle.height
处理兼容:
(1)使用try...catch 处理兼容
/*
功能:获取当前浏览器计算过得所有的样式对应的attr对应的值
参数:curEle 当前要操作的元素对象,attr字符串类型的值,我们要获取的当前元素的属性名
返回值:返回获取到当前元素的attr属性的值
*/
getCss:function(curEle,attr){
var curAttrVal = null;
try{
curAttrVal = window.getComputedStyle(curEle,null)[attr];
}catch(e){
curAttrVal = curEle.currentStyle[attr];
}
return curAttrVal;
}
弊端:
1、必须保证try中的代码在低版本浏览器中报错,否则catch中的语句不会执行
2、不管是什么浏览器,try中的语句都会先执行一遍,比较消耗性能
(2)检测当前浏览器中是否存在当前的属性或者方法,存在即兼容
getCss:function(curEle,attr)
{
var curAttrVal = null;
if("getCumputedStyle" in window){
curAttrVal = window.getComputedStyle(curEle,null)[attr];
}
else{
curAttrVal = curEle.currentStyle[attr];
}
return curAttrVal ;
}
js 盒子模型与盒子偏移量的更多相关文章
- 盒子模型(W3C盒子模型、IE盒子模型)
盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...
- W3c盒子模型+IE盒子模型+box-sizing属性
1.盒子模型有两种,标准盒模型和IE盒模型,其中W3C标准的盒模型就是在网页的顶部加上 DOCTYPE 声明. (1)W3C标准的盒模型 W3C盒子模型包括4部分:margin,border,padd ...
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- CSS布局(一) 盒子模型
一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 标准W3C盒子模型和IE盒子模型
标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...
随机推荐
- UartAssist串口调试工具
第一步安装UartAssist 第二步打开UartAssist 界面为 我们将我们的wifi模块连接电脑, 查看的端口号通过计算机管理设备管理器进行查看 根据要求发送数据 就可以了
- 初识webSocket及其使用
阅读目录 1.什么是webSocket? 2.webSocket实现原理 3.webSocket优点 4.webSocket和socket的区别 5.webSocket API 6.webSocket ...
- No parser no filepath given问题解决
关于 vue 项目 run dev 的时候,控制台警告: No parser and no filepath given, using 'babylon' the parser now but thi ...
- python编程学习day03
1.文件操作 (1)打开文件 f = open ("文件名称",mode='' ",encoding="utf-8") mode=操作方式 encod ...
- 限时免费 GoodSync 10 同步工具【转】
一款不错的软件,正在开发本身的云盘,要是能够云执行任务就更好了! GoodSync 10是一种简单和可靠的文件备份和文件同步软件.它会自动分析.同步,并备份您的电子邮件.珍贵的家庭照片.联系人,.MP ...
- delphi如何设计不规则窗体
制作多边形窗体的关键在于设定多边形的区域,并根据这个指定的区域改变窗体的形状.Windows的CreatePolygonRgn和SetWindowRgn函数可以解决这两个难点.利用以下代码即可将窗体设 ...
- NX二次开发-将工程图上的每个视图导出PNG图片
大概思路是将每个视图导出PDF,在调另一个项目的EXE(PDF转PNG) //ExportDrawViewPng // Mandatory UF Includes #include <uf.h& ...
- NX二次开发-UFUN输出UF函数使用错误UF_get_fail_message
#include <uf.h> #include <uf_ui.h> #include <uf_modl.h> UF_initialize(); UF_FEATUR ...
- NX二次开发-UFUN将目录与文件名组合在一起uc4575
NX11+VS2013 #include <uf.h> #include <uf_ui.h> #include <uf_cfi.h> UF_initialize() ...
- NX二次开发-C++ DeleteFile删除文件实例代码
NX9+VS2012 #include<Windows.h> DeleteFile("D:\\1\\test123.prt"); Caesar卢尚宇 2019年7月29 ...