JS操作盒子模型

本文介绍了JS获取盒模型属性值的特点,如获取的是数字、整数且为复合样式值。还阐述了获取元素具体样式值的方法,包括行内样式和浏览器计算样式。详细讲解了client、offset、scroll三大系列的属性,最后提及封装样式操作及for in循环遍历对象属性的相关知识。

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

JS获取盒模型属性值的特点:

1.获取的都是数字不带单位
2.获取的都是整数,不会出现小数
3.获取的结果都是复合样式值(好几个元素的样式组合在一起的值),如果只想获取单一样式值(例如:只想获取padding),我们的盒子模型就操作不了

获取元素具体的某个样式值:

1.【元素】.style.xxx操作获取
只能获取行内
2. 获取当前元素所有经过浏览器计算过的样式(只要浏览器渲染它)
不管当前样式写在哪,不管是否写了

标准浏览器(IE9+)
window.getComputedStyle([元素], [伪类, 一般都写null])获取到当前元素所有被浏览器计算过的样式(后面有px)
IE6-8 window.currentStyle

三大系列:client、offset、scroll

1.client

  • clientWidth & clientHeight:获取当前元素可视区域的宽高(内容的宽高+左右/上下padding)
    和内容是否溢出无关(和是否设置overflow:hidden无关)
  • clientTop & clientLeft :获取(上/左)边框的宽度
    需求:获取当前页面一屏幕的宽度和高度
    document.documentElement.clientWidth || document.body.clientWidth
    document.documentElement.clientHeight || document.body.clientHeight

2.offset:

  • offsetWidth & offsetHeight :在client的基础上加上border(和内容是否溢出没有关系)
  • offsetParent:当前盒子的父级参照物
  • offsetTop / offsetLeft: 获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移),当前盒子的内边框到父元素外边框
    注意: 同一个平面中,元素的父级参照物和结构没有必然联系,默认他们的父级参照都是body,body的父级参照物为null
    参照物可以改变,构建出不同的平面即可,所以改变元素的定位(position:relative/absolute/fixed)可以改变父级参照物
    需求:不管何种定位,获取当前元素距离body的偏移量(左偏移和上偏移)
    1.首先获取当前元素的左偏移
    2.在这个基础上累加:
    A:父参照物的边框
    B:父参照物的偏移
let offset = function (curEle){
	//1.先获取当前元素本身的左/上偏移
	let curLeft = curEle.offsetLeft,
		curTop = curEle.offsetTop,
		p = curEle.offsetParent;
	//2.累加父参照物的边框和偏移
	while(p.tagName !== 'BODY){
		curLeft += p.clientLeft;
		curLeft += p.offsetLeft;
		
		curTop += p.clientTop;
		curTop += p.offsetTop;
		p = p.offsetParent;
	}
	return {
		top: curTop,
		left: curLeft
	}
}

3.scroll

  • scrollWidth & scrollHeight :真实内容的宽高,如果溢出算上paddingTop加真实内容的高度
    需求获取当前页面的真实宽高,包括溢出
    document.documentElement.scrollWidth || document.body.scrollWidth
    document.documentElement.scrollHeight || document.body.scrollHeight
  • (可读写)scrollTop / scrollLeft :滚动条卷去的宽度或者高度
    最大卷去高度;document.documentElement.scrollHeight - document.documentElement.clientHeight
    操作浏览器的盒子模型属性,我们一般都要写两套,用来兼容各种模式下的浏览器
    回到顶部:document.documentElement.scrollTop = 0
let winHandle = function (attr, value) {
	if(typeof value != undefined){
		document.documentElement[attr] = value;
		document.body[attr] = value;
		return;
	}
	return document.documentElement[attr] || document.body[attr];
}	
封装样式操作
let getCss = function(curEle, attr) {
	if(typeof window.getComputedStyle === 'undefined'){
		return;
	}
	let val = =window.getComputedStyle(curEle, null)[attr],
		reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i;
		reg.test(val) ? val = parseFloat(val) : null;
		return val; 
}

//JS给元素设置样式:1.添加类名;2.通过行内样式设置
/*
* 细节处理:
* 	1.如果要考虑IE6-8,透明度这个样式 在低版本浏览器中不是使用opacity,而是filter(两套都要设置)
* 	2.如果传递进来的value值没有带单位,我们根据情况设置px单位
*   ->某些样式属性才会加width、height、padding、margin、font-size、top、left、bottom、right
* 	->用户自己传递的value值是没有单位的
*/
let setCss = function (curEle, attr, value) {
	if (attr === 'opacity'){
		curEle.style.opacity = value;
		curEle.style.filter = `alpha(opacity=${value*100})`;
		return;
	}
	//下为纯数字的情况
	if(!isNaN(value)){
		let reg = /^(width|height|fontSize|(margin|padding)?(top|left|right|bottom)?))$/i
		reg.test(attr) ? value += 'px' : null;
		return;
	}
	curEle['style'][attr] = value;
	return;
}

//给元素批量设置样式
//遍历传进来的options,有多少键值对,就循环多少次
let setGroupCss = function (curEle, options={}){
	for(let attr in options){
		if(!options.hasOwnProperty(attr))break;
		setCss(curEle, attr, options[attr]);
	}
}

//css:集合GET/SET/SET-GROUP为一体
let css = function(...arg) {
	// => ARG: 传递的实参集合
	let len = arg.length,
		second = arg[1],
		fn = getCss;
	len >= 3 ? fn = setCss : null;
	len === 2 && (second instanceof Object) ? fn = setGroupCss : null;
	return fn(...arg);
}

补充:

for in循环只遍历当前对象可枚举的属性
1.对象的私有属性是可枚举的
2.自己在类的原型上设置的属性也是可枚举的,for-in循环也会被遍历出来
3.浏览器内置的属性一般是不可枚举的

关于 JavaScript 盒子模型的概念,实际上更常见的是 CSS 盒子模型被用来描述 HTML 元素在页面上的布局方式。然而,在 JavaScript 中可以通过操作 DOM 来间接影响这些盒子模型的行为和特性。下面详细介绍与 JavaScript 相关的盒子模型概念及其组成部分。 ### 一、JavaScript 对盒子模型的影响 尽管 JavaScript 自身并没有专门定义所谓的“盒子模型”,但它提供了强大的功能去操控由 CSS 定义的盒子模型。开发者能够利用 JavaScript 动态调整元素尺寸、位置以及其他样式属性,从而改变网页上显示效果。 #### 修改盒模型属性 例如,使用 JavaScript 可以轻松更改一个元素的内容区域大小(content)、内边距(padding)、边框(border),甚至外部空白(margin)[^1]。这里给出一段简单的例子展示如何通过脚本语言访问并修改这些值: ```javascript let element = document.querySelector('.a'); // 获取目标元素 element.style.width = '200px'; // 设置宽度 element.style.height = '200px'; // 设置高度 element.style.padding = '20px'; // 调整内部间距 element.style.border = '5px solid black';// 更改边框样式 element.style.margin = '10px'; // 应用外边距 ``` 这段代码片段展示了怎样运用 JavaScript 改变 `.a` 名所代表的那个 div 的几何特征,包括但不限于其宽高、填充量、边界线粗细以及周边留白距离等参数设置[^4]。 ### 二、组成要素解析 虽然严格意义上讲这是基于CSS理论框架下讨论的话题,但从编程实践角度来看,理解如下几个核心组件对于掌握如何借助JS控制视觉呈现至关重要: 1. **内容区(content)** - 这是最基本的部分,指定了具体文本或图像等内容的实际占用空间范围; 2. **内边距(padding)** - 将内容与其周围边界的间隔拉开一定距离形成缓冲地带; 3. **边框(border)** - 绕着内容加上一圈装饰性的线条作为分隔标志; 4. **外边距(margin)** - 提供与其他相邻对象之间的额外空隙保障整体排列整齐有序[^5]。 每个部分都可以单独设定各自的度量单位(px, % etc.) 并且相互叠加最终决定了整个容器的整体外观形态。 ### 结论 综上所述,虽然不存在独立意义上的所谓 “JavaScript 盒子模型”,但是凭借丰富的 API 接口集合,我们完全有能力灵活定制各复杂交互式的 UI 效果。通过对上述各个构成单元的学习研究,可以更好地把握前端开发技巧要点所在。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值