JS中的盒子模型

最新推荐文章于 2023-09-18 19:09:03 发布

原创最新推荐文章于 2023-09-18 19:09:03 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端开发专栏收录该内容

23 篇文章

订阅专栏

本文详细解读了网页中的盒子模型及其属性、方法，包括clientWidth、clientHeight、offsetWidth、offsetHeight等，并介绍了如何使用JavaScript获取CSS样式，如通过getComputedStyle和currentStyle。同时讨论了偏移量的概念及计算方式，以及如何获取当前浏览器一屏幕的宽度和高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//js盒子模型-->浏览器提供一些获取盒子位置信息的属性和方法
    //1、clientWidth/clientHeight
    //clientWidth:width+左右padding
    //clientHeight:height+上下padding

    //2、clientTop/clientLeft
    //clientTop:上边框的高度
    //clientLeft:左边框的宽度
    //不存在clientRight和clientBottom，这两属性的是都是undefined

    //3、offsetWidth/offsetHeight
    //offsetWidth:clientWidth+左右边框
    //offsetHeight:clientHeight+上下边框

    //高度不设置的话，高度会自适应，height的值就是实际内容的高度

    //4、scrollWidth/scrollHeight
    //在没有内容溢出的情况下和clientWidth/clientHeight是一样的
    //有内容的溢出情况(在每一个浏览器中的值不太一样,加上overflow: hidden和不加还有少许的区别):
    //scrollHeight:约等于 真实内容的高度(包含溢出的内容)+上padding
    //scrollWidth:约等于 真实内容的宽度(包含溢出的内容)+左padding
    //console.log(oDiv.scrollHeight);

    //获取当前浏览器一屏幕的宽度和高度
    //document.documentElement.clientWidth || document.body.clientWidth;
    //document.documentElement.clientHeight || document.body.clientHeight;

    //当前所有屏加起来的高度(当前网页的高度)~= document.documentElement.scrollHeight||document.body.scrollHeight


    //style设置和获取的都是行内样式，如果行内上没有写这个样式(不管你是否在样式表中写了)，我们都获取不到值
    //console.log(oDiv.style.width);//-->""


    //getComputedStyle：获取经过计算机计算的样式(只要是在页面上的元素，它的样式都是经过计算机计算的样式)
    //window.getComputedStyle(要获取样式的元素,当前元素的伪类(一般情况下我们都写null));  -->存储的是一个对象数据类型的值，里面包含了当前这个元素的所有的样式属性，我们如果想获取其中的某一个样式的值
    //console.dir(window.getComputedStyle(oDiv, null)["marginLeft"]);
    //console.dir(window.getComputedStyle(oDiv, null));
    //我们在css中刚开始设置的默认的公共样式，不仅对css编写由帮助，而且对于js也是有帮助的，方便我们对所有浏览器默认的样式值进行统一

    //getComputedStyle在IE6~8下不兼容，我们需要用currentStyle来代替(currentStyle只有IE下才能用)
    //console.log(oDiv.currentStyle["marginTop"]);

    //getComputedStyle/currentStyle 获取的样式的值，数字这种的类别的都是加单位的,例如:"100px"，而有些样式的值天生就没有单位,例如：display、opacity、position、zIndex、float...，除了这些还有一些是复合样式的，例如：margin、padding、border...

兼容所有浏览器的获取css的方式

function getCss(curEle, attr) {
        var val = null;
        if ("getComputedStyle" in window) {
            val = window.getComputedStyle(curEle, null)[attr];
        } else {
            val = curEle.currentStyle[attr];
        }
        //margin|padding(Top、Left、Right、Bottom)、left、top、bottom、right、width、height
        var reg = /^(((margin|padding)?(top|left|bottom|right))|(width|height))$/i;
        if (reg.test(attr)) {
            if (val.indexOf("%") === -1) {
                return parseFloat(val);
            }
        }
        return val;
    }

偏移量：当前盒子的外边框距离父级参照物产生的位移
我们用offsetParent来获取父级参照物，offsetParent(父级参照物)和parentNode(父亲节点)没有必然的联系
页面中的所有的元素默认都在同一个水平面上,父级参照物是当前平面最外面的那个盒子，所以默认情况下，所有元素的父级参照物都是body
如果需要改变父级参照物我们只能用position将它的平面关系改变，加了这个属性 则改变了其父级参照物