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

盒子模型

JS盒子模型中的13个常用属性：

  • clientWidth/clientHeight：可视区域的宽高，宽高+PADDING组成
  • clientTop/clientLeft：上边框和左边框的宽度
  • offsetWidth/offsetHeight：clientWidth/clientHeight+border
  • offsetParent：父级参照物，和父级元素没有必然关系，默认元素的父级参照物都是BODY，如果设置定位后，可以改变默认的父级参照物
  • offsetLeft/offsetTop：当前元素的外边框距离父级参照物内边框的偏移(左/上) =>IE8下是当前元素的外边框距离父级参照物的外边框算作偏移
  • scrollWidth/scrollHeight：当前元素真实内容的宽度和高度，在没有内容溢出的情况下，和clientWidth/clientHeight的值一模一样；但是在内容有溢出的情况下，scrollHeight获取的值是上padding+真实内容的高度(由于浏览器对于字体等渲染不太一样，所以我们获取的结果都是约等于的值，并且是否这是overflow:hidden也会对结果产生影响)
  • scrollTop/scrollLeft：当前区域如果有内容溢出，并且我们也让其出现了滚动条，那么这两属性获取的即使滚动条卷去的宽度和高度
    • 1、scrollTop/scrollLeft是13个属性中唯一可以进行读写的，其余的都是只读的
    • 2、通过JS盒子模型的属性获取到的结果都是整数(它默认会对小数值进行四舍五入，而且获取的值是不带单位的)
    • 3、如果操作的是整个页面(不管是获取还是设置)，想要兼容的话，需要写两套： document.documentElement.xxx=xxx; document.body.xxx=xxx;
    • 4、JS中的盒子模型，获取的样式值都是复合值，如果想获取单独某一个具体的样式值(例如:我就想获取width或者paddingLeft)使用这13个属性就不行了

获取当前元素的具体样式属性值

　　

JS中浏览器兼容检测的三大方式

  • 使用TRY、CATCH
　　
  • 当前浏览器信息监测来判断是否兼容
　　
  • 验证当前即将使用的属性和方法是否在当前对象中
　　
时间： 2024-08-09 21:31:21

关于js盒子模型的知识梳理的相关文章

js盒子模型

1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype var box = document.getElementById("box"); c

js盒子模型常用属性

概念:通过js的属性和方法获得元素的样式信息值  查看元素详细属性console.dir(); 操作元素盒子模型 1.client系列(当前元素的私有属性) 1)clientWidth/clientHeigth:内容的宽度(不包括内容溢出部分,固定设置的width和height)/高度+左右/上下padding值 2)clientTop/clientLeft:上/左边框的高度 2.offset系列 1)offsetHeight/offsetWidth:内容的高度/宽度+左右/上下padding+

盒子模型相关知识总结

一. CSS层叠 在前端程序员对CSS编写的过程中,CSS选择器的作用是用来选中某个元素,并对当前的元素进行样式上的渲染,那么每一个选择器都有属于自己的一些解析规则.那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源进行叠加,并最终解析成渲染效果,那这个过程我们就称为CSS层叠. 1) CSS样式的来源 css之所以有"层叠"的概念,是因为有多个样式来源.其实css的样式来源有5个,开发人员只能接触到后面3个. 前三个我们程序员习惯的称为:"内联样式表".&qu

HTML盒子模型冷知识！！！

一.边框    1.边框颜色     border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)     2.边框粗细     border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)     2.边框样式     border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)    二.外边距  1.mar

css 盒子模型理解

盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最

Js基础知识梳理系列

小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的“瓶颈期”.问了一些前辈是否也遇到过同样的问题,他们给我的解决方案是,基础不稳固,再把基础巩固一下.然后学起新的技术会轻松一点点.也是,反思自己曾经走马观花式的学习,确实有很多细腻的技术点没有接触到,所以,我还没有做到大神眼里的“精”.抱着这样的目的,再次翻开<JavaScript高级编程设计>,我将按照着书上的内容和顺序,系统化的学习这本书中的知识.并且在学习的过程中会结合

web开发之浏览器（二）----JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

1,JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9.  以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9及以下的版本. 如果要全面支持 IE,并混合使用 jQuery 1.9及以下 和

js中盒子模型常用的属性你还记得几个？

//clientWidth;//内容宽度Width+左右填充padding//clientHeight;//内容高度height+上下填充padding//clientLeft;//左边框的宽度相当于border-left//clientTop;//上边框的宽度相当于border-top//offsetWidth;//clientWidth+左右边框//offsetHeight;//clientHeight+上下边框//scrollHeight;//真实内容宽度+上填充padding//scro

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p