JS的盒子模型

本文详细介绍了JavaScript中的盒子模型,包括client系列、offset系列和scroll系列等属性及其应用场景,并提供了兼容不同浏览器的操作方法。

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

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

<script type="text/javascript">  
    var box = document.getElementById("box");  
    console.dir(box);  
</script>

#box(有很多自己的私有属性)-> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> 

EventTarget.prototype -> Object.prototype

以下面这个盒子作为例子了解一下JS中的盒子模型:

内容的宽度和高度:我们设置的 width / height 这两个样式就是内容的宽和高;如果没有设置height的值,容器的高度会更具里面内容多少自己进行适应,这样获取的值就是真实内容的高;如果固定的高度了,无论内容的多了还是少了,其实我们的内容的高度都是设定的那个值

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


(当前元素的几个私有的属性)

1.client系列

-> clientWidth / clientHeight : 内容的宽度 /  高度 + 左右 / 上下填充padding

-> clientLeft / clientTop : 左 边框的宽度 / 上边框的高度   (border [ Left / Top ] Width)



2.offset系列

-> offsetWidth / offsetHeight :  clientWidth / clientHeight  + 左右 / 上下边框border

-> offsetParent:当前元素的富集参照物

-> offsetLeft / offsetTop:当前元素的外边框距离富集参照物的内边框的偏移量



3.scroll系列

-> scrollWidth / scrollHeight :和我们的clientWidth / clientHeight 一模一样(前提是:容器中的内容没有溢出的情况下)

-> 如果容器中的内容有溢出,我们获取的结果是如下规则:

scrollWidth :真实内容的宽度(包含溢出) + 左填充padding-left

scrollHeight:真实内容的高度(包含溢出) + 上填充padding-top

-> 获取到的结果都是“约等于”的值,因为:同一个浏览器,我们是否设置overflow: hidden; 对于最终的结果石油影响的,在不同的浏览器中我们取到的结果也是不同的

-> scrollLeft / scrollTop:滚动条卷去的宽度 /  高度



二。关于JS合作司模型属性取值的问题

我们通过这13个属性值获取到的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实结果的基础上进行四舍五入


三。关于操作浏览器本身的盒子模型信息

-> clientWidth / clientHeight 是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)

-> scrollWidth / scrollHeight 是当前页面的真实宽度和高度(所有屏加起来的宽度和高度,但是是一个约等于的值)

-> 我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要兼容的话,就需要写两套

document.documentElement[attr] || document.body[attr]  -> 必须document.documentElement在前面

-> 例如:

[获取]    

document.documentElement.clientWidth || document.body.clientWidth

[设置也需要写两套]

document.documentElement.clientWidth = 0;

document.body.clientWidth = 0;


为了方便,编写一个关于操作浏览器盒子模型的方法win

如果只传递了attr没有传递value,默认的意思就是“获取”

如果两个参数都传递了,意思就是“设置”

不严谨的说,这就是有关于“类的重载”,同一个方法,通过传递参数的不同实现了不同的功能

<script type="text/javascript">  
    var box = document.getElementById("box");  
    console.dir(box);  
    function win(attr,value) {  
        if(typeof value === "undefined"){//->没有传递value值=“获取”  
            return document.documentElement[attr] || document.body[attr];  
        }  
        //“设置”  
        document.documentElement[attr] = value;  
        document.body[attr] = value;  
    }  
</script>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值