第六节盒子模型和盒子模型偏移量

------------------------------------盒子模型常用的八个属性---------------------------------
Js盒子模型
Js盒子模型指的是通过js提供的一系列的属性和方法,获取页面中元素的样式信息值

 client系列(当前元素的私有属性)
 clientWidth/clientHeight:内容的宽度/高度+左右/上下填充,(和内容溢出没有关系)
 clientLeft:左边框的宽度(borderLeftWidth)   
 clientTop:上边框的高度(borderTopWidth)
 //真实的内容宽度和高度其实不是这样的,真实的高度是要把溢出的高度也要加进来

 offset系列
 offsetHeight/offsetWidth:clientWidth/clientHeight+左右边框/上下边框(和内容溢出没有关系)
 offsetParent:当前元素的参照物
 offsetLeft/offsetTop:当前元素的外边框距离父级参照物的偏移量

 scroll系列
  1、内容有溢出
  scrollWidth/scrollHeight 内容没有溢出的情况下和clientWidth/clientHeight一模一样
  2、内容没有溢出:
  如果容器中内容有溢出我们获取的内容以下规则:
  scrollWidth:真实内容的宽度(包含溢出)+左填充
  scrollHeight:真实内容的高度(包含溢出)+上填充
  获取到的结果都是‘约’等于的值,不同的浏览器结果也是不同的,设置overflow: hidden;有影响,在不同的浏览器中我们获取到的结果是不相同的
   scrollLeft/scrollTop滚动条卷去的宽度/高度

   关于浏览器本身盒子模型信息
    clientWidth/clientHeight当前浏览器可视窗口的高度和宽度(一屏)
    scrollWidth/scrollHeight当前页面真实的宽度和高度(所有屏的宽度和高度,是一个约等于的值)
 
    不管是哪些属性,也不管是什么浏览器,不管是设置还是获取,想要兼容都写两套
    获取
    document.documentElement[attr]||document.body[attr]
    设置
    document.documentElement.scrollTop=0;
    document.body.scrollTop=0;

编写一个有关于操作浏览器盒子模型的方法
如果只传递了attr没有传递value,默认的意思是获取样式值
如果两个参数都传递了,意思是设置某一个样式属性值



设置、获取浏览器的宽度和高度
    function win(attr,value){
        if(typeof  value=='undefined'){
              return document.documentElement[attr]||document.body[attr];
        }
        document.documentElement[attr]=value;
        document.body[attr]=value;
}
获取可视宽:win(“clientHeight”)
设置值:win(“scrollTop,0”)

----------------获取元素的具体样式信息值以及Js兼容检测三种方式--------------

以上获取的都是组合样式值,如果想获取某一个具体的属性值两种方式:
1、元素.style.属性名(需要我们把所有的样式写在行内样式才可以)(真实项目中不常用)(无法实现css和html的分离)
2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式(只要当前的元素标签可以在页面中呈现出来,那么它所有的样式都是经过浏览器计算过的,哪怕样式没有写也可以获取到)
window.getComputedStyle  ----->function getComputedStyle()
window.getComputedStyle(当前要操作的元素对象,当前元素的伪类一般写null)
获取的结果是是经过浏览器计算过,是CSSStyleDeclaration这个类的实例,这个实例包含了当前元素的所有样式属性值

Js兼容检测三种方式 1、try catch  使用try catch处理兼容,消耗性能,不得已的情况下使用不是最优的方式
    function getcss(obj, attr) {
        var val = null;
        try {
            val = window.getComputedStyle(obj)[attr];
        } catch (e) {
            val = obj.currentStyle[attr];
        }
        return val;
    }
2、判断浏览器中是否存在这个属性或方法,存在就兼容,不存在就不兼容  (最优)
     function getcss(obj,attr){
         var val=null;
         if("getComputedStyle" in  window){//判断某一个属性是否属于这个对象
             val=window.getComputedStyle(obj)[attr];
         }else{
             val=obj.currentStyle[attr];
         }
         return val;
     }

3、根据浏览器的版本来处理兼容
          function getcss(obj,attr){
             var val=null;
             //判断某一个属性是否属于这个对象
             if(!/MSIE(6|7|8)/.test(window.navigator.userAgent)){
                 val=window.getComputedStyle(obj)[attr];
             }else{
                 val=obj.currentStyle[attr];
             }
             return val;
         }

升级getcss(),部分去掉样式的单位
  function getcss(obj,attr){
        var val=null;
        var reg=null;
        if("getComputedStyle" in  window){
             val=window.getComputedStyle(obj,null)[attr];
        }else{
            val=obj.currentStyle[attr];
        }
        reg=/^(-?\d+(\.\d+)?)(px|rem|em)$/i;
        return reg.test(val)?parseFloat(val):val;
}
标准浏览器和IE浏览器获取的结果是不一样的----->对于部分样式属性,不同浏览器获取的结果不一样,主要是由于getComputedStyle和currentStyle在某些方面不一样
获取复合型值的时候,比如border等需要拆开了来获取,会避免获取不到的问题

---------------------------浏览器滚动条卷去的高度scrolltop------------------------

1、只读的属性
client系列offset系列scrollWidth/scrollHeight都是只读的属性

2、可以设置值的属性
box.scrollTop=0直接回到了容器的顶部

我们的scrollTop的值是存在边界值的(最大值和最小的值的),最小是0,
最大是box.scrollHeight-box.clientHeight




------------------------------------------------获取元素的偏移量-----------------------------------------------------
盒子模型案例分析offsetParent和offsetLeft/offsetTop 的特点
parentNode:父节点
    var outer=document.getElementById('outer');
    var inner=document.getElementById('inner');
    var center=document.getElementById('center');
//    console.log(center.parentNode);
//    console.log(document.body.parentNode);
//    console.log(document.documentElement.parentNode);
//    console.log(document.parentNode);
//    console.log(document.aa);

Null和undefined都代表没有,但是null是值不存在,undefined是连这个属性都不存在

offsetParent:父级参照物,在同一个平面中,最外层的元素是里面所有的父级参照物(和HTML层级结构没有必然的联系)
一般来说一个页面中所有元素父级参照物都是body
center/inner/outer.offsetParent ----->body
document.body.offsetParent   //body是平面中的顶级是没有父级参照物的

想要改变父级参照物需要脱离当前平面,需要通过position定位来进行改变
           position: relative;
           position: absolute;
           position: fixed;
           position: static;
           position:inherit;
absolute、relative、fixed任意一个值都能把父级参照物修改

offsetTop/offsetLeft:当前元素(外边框)距离其父级参照(内边框)物偏移距离
思考:不管center的父级参照物是谁,获取其距离body的左偏移?
1、首先加上自己本身的左偏移
2、获取自己的父级参照物(xx)把xx的左边框和左偏移加上
3、基于当前的xx向上找父级参照物,找到后依然是累加边框和其左偏移
4、一直找到父级参照物为null,一直找到body

Offset():和jq中的offset()方法相同,实现获取页面中任意一个元素,距离body的偏移(包含左偏移和上偏移),不管当前的父级参照物是谁。 

在标准的ie8浏览器中我们使用offsetLeft/offsetTop其实是是把父级参照物的边框已经算在内了,所以我们不需要自己再单独加边框  
   function offset(curEle) {
        var totalleft = null;
        var totaltop = null;
        var par = curEle.offsetParent;
//      累加本身
        totalleft += curEle.offsetLeft;
        totaltop += curEle.offsetTop;
//        只要没有找到body就把父级参照物的边框和偏移进行累加
        while (par) {
//          不是ie8就累加边框
            if(window.navigator.userAgent.indexOf('MSIE 8.0')==-1){
                //累加父级参照物的边框
                totalleft+=par.clientLeft;
                totaltop+=par.clientTop;
            }
            //累加父级参照物的偏移
            totalleft+=par.offsetLeft;
            totaltop+=par.offsetTop;
            par=par.offsetParent;
        }
        return{
            left:totalleft,
            top:totaltop
        }
}

作业:
1、点击滑动到文档开始
2、图片无缝滚动
3、文字上下/左右无缝滚动
4、手风琴效果
5、轮播
--------------------------------------------js同步与异步编程------------------------------------
Js是单线程------->可以想象它是一根筋,做着当前的这件事情,没有完成之前绝对不会做下一件事情
Js中的两种编程思想:同步和异步编程
同步编程------->只有上一件事情没有完成,继续处理上一件事情,只有上一件事情完成了,才会说做下一件事情(js中大部分是同步编程的)

异步编程:规划做一件事情,但是不是当前立马去执行这件事情,需要等待一定的时间,这样的话,我们不会等着他执行,而是继续执行下面的操作,只有当下面的事情都处理完成了,才会返回头处理之前的事情,如果下面的事情并没有处理完成,不管之前的事情有没有到时间,都会踏踏实实的等它执行完。

在js中异步编程只有四种情况:
1、定时器都是异步编程
2、所有的事件绑定都是异步编程的
3、Ajax读取数据的时候
4、回调函数也是异步编程

每一个浏览器对于定时器的等待时间都有一个最小值,谷歌是5~6ms,IE10~14ms,如果设置的等待时间小于这个值不起作用,还是需要等待最小的时间才执行的,尤其是写0也不立即执行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web

慕课网javascript 进阶篇 第九章 编程练习

1304
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

1602
来自专栏Python研发

DOM

文档对象模型(Document Objenct Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一中结构化的表示方法,可以改变文档的...

933
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

1412
来自专栏DannyHoo的专栏

OC中获取一串字符串的高度(宽度确定)或宽度(高度确定)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1133
来自专栏偏前端工程师的驿站

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

一、前言                                 由于innerText并非W3C标准属性,因此我们无法在FireFox中使用它(修正:...

2337
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

4597
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

3482
来自专栏前端菜鸟变老鸟

知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView

881
来自专栏Java帮帮-微信公众号-技术文章全总结

04.HTML区块/布局/表单/框架/颜色/颜色名/颜色值

04.HTML区块/布局/表单/ 框架/颜色/颜色名/颜色值 HTML <div> 和<span> ---- HTML 可以通过 <div> 和 <span>将...

7475

扫码关注云+社区

领取腾讯云代金券