1.js盒子模型

指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值

例:

#box有很多自己的私有属性:

HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype

var box = document.getElementById("box");

console.dir(box);

2.概念

2.1 内容的宽度和高度

我们设置的width/height这两个样式就是内容的宽和高;

● 如果没有设置height值,容器的高度会根据里面内容自适应,这样获取的值就是真实内容的高;

● 如果设置了固定的高度,不管内容是多还是少,其实我们内容的高度值的都是设定的那个值。

2.2 真实内容的宽度和高度

代指的是实际内容的宽高(和我们设置的height没有必然的联系),如我设置高度为200,如果内容有溢出,那么真实内容的高度是要把溢出内容的高度也加进来的。

1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin;

2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值

JS提供的属性和方法:

    client系列:clientWidth,clientHeight,clientLeft,clientTop;

    offset系列: offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

    scroll系列:scrollWidth,scrollHeight,scrollLeft,scrollTop

3.关于父级

1)parentNode 结构父级

2)offsetParent 定位父级

4.JS提供的属性和方法:

1)clientWidth/clientHeight:元素设定的宽/高+左右padding值/上下padding值;

clientLeft/clientTop:代表对应左边框/上边框的宽度;

**跟内容是否溢出无关;

2)offsetWidth:clientWidth/clientHight+左右border/上下border;

offsetLeft:当前元素的外边框距离定位父级内边框的距离;

**跟内容是否溢出无关;

3)scrollHeight::

跟内容是否溢出有关

内容溢出:约等于上padding+真实内容的高度;

内容没溢出:等于clientWidth或clientHeight;

为什么是约等于?

①不同浏览器中,拿到的scrollHeight值是不同的;

②同一浏览器是否溢出隐藏,拿到的值不同;

5.关于JS盒子模型的一些问题

1)通过JS的属性和方法拿到的都是属性的复合 样式,拿不到单独的值;getCss;

2)拿到的复合样式值都是整数,不会出现小数;

3)offsetLeft只能求出当前元素的外边框距离定位元素父级的内边框之间的距离,但是求出与定位元素距离body的距离;—offset{left,top}

4)JS盒子模型的兼容性存在问题;—clientWidth,scrollHeight__—win

6.关于浏览器的常用兼容处理思想

①思想一,属性值的判断:

    attr in window

    obj.attr

    typeOf obj.attr==‘function'

②思想二,浏览器异常捕获:try{……} catch(e){……} finally{……}

③思想三,通过浏览器判断处理浏览器兼容问题;

var reg=/MSTE (6|7|8)/g;

    reg.test(window.navigator.userAgent);//true:IE678;

    window.navigator.userAgent.match(reg );true —>ie678

    window.navigator.userAgent.search(reg); !==-1—>ie678

7.结构父级中最大的是HTML;定位父级中最大的元素是body;

8.this的用法

1)当前元素被触发的时候,会调用一个函数,函数中的this指向当前这个元素;

2)函数被调用的时候,点前面是谁,this就是谁

3)自执行函数中的this,window;

4)构造函数中的this是实例;

5)回调函数中的this默认是window;

6)call可以改变this指向

JS 盒模型 scrollLeft, scrollWidth, clientWidth, offsetWidth 详解

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

全兼容的 scrollTop:  var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

http://blog.suiyidian.cn/post-94.html

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

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

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

  2. js 盒子模型与盒子偏移量

    js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...

  3. JS“盒子模型”

    列举几个常用的属性 client系列 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条 clientHeight - 盒子真实内容的高度[con ...

  4. JS学习:第二周——NO.3盒子模型

    1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值   JS提供的属性和方法: clien ...

  5. js中的盒子模型

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

  6. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  7. DOM盒子模型常用属性client,offset和scroll

    JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

随机推荐

  1. java面向对象_接口

    java接口 interface,是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并不是类,编写接口的方式和类很相似,但 ...

  2. 转:Linux基本命令大全

    Linux基本命令大全   新手刚刚接触Linux的时候可能处处感到不便,不过没有关系,接触新的事物都有这样的一个过程,在你用过Linux一段时间后,你就会逐渐了解Linux其实和Windows一样容 ...

  3. Maven常用插件配置和使用

    主要介绍Maven的几个常见第三方插件(cobertura.findbugs.source.assembly.插件开发)配置和使用,接Maven介绍 maven本质上是一个插件框架,它的所有工作都交给 ...

  4. Chapter 1 First Sight——16

    I drove around the school, following the line of traffic. 我开车绕学校随着交通线. 我开车穿过校园,紧跟着大部队. I was glad to ...

  5. PAT乙1003

    这次终于觉得智商不够用了,特么的. 总结给你的经验,对于这样字符串的题目,经常会出现一种叫做递归定义的东西. 还有一种叫做,相同的字母表示相同的字符串. 这道题目一共有三个条件. 1. 字符串中必须仅 ...

  6. CentOS/RHEL 7中的firewall控制

    从CentOS/RHEL 7开始firewall的使用.很多人卸载了firewall重装iptables.但是有时候只是为了开放端口什么的,没有那个闲工夫卸载重装: 永久打开一个新端口(如TCP/80 ...

  7. 洛谷U4727 小L 的二叉树

    U4727 小L 的二叉树 题目背景 勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣. 所以,小L当时卡在了二叉树. 题目描述 在计算机科学中,二叉树 ...

  8. PAT (Advanced Level) 1048. Find Coins (25)

    先对序列排序,然后枚举较小值,二分较大值. #include<iostream> #include<cstring> #include<cmath> #includ ...

  9. Struts2--Global Result全局结果集

    如果有很多action,有共同的result指向, 而且属于不同的包,那么可以继承上面的包, 然后写一个<global-results> 1. jsp显示文件: <ol> &l ...

  10. android4.0 的图库Gallery2代码分析(三) 之Applition的初始化准备

    Applition的初始化准备 图库的一切动作都明显地起源于Application.这是区别与其他那种感觉不到Application存在,仅仅感觉到Activity存在的简单应用的一个特点. 图库的a ...