JS DOM.style.height 取不到的情况 为空的情况

<html>
	<head>
		<title></title>
		<style type="text/css">
			#hell{
				display: inline-block;
				background:red;
				width:100px;
				height:100px;
				border:1px solid yellow;
			}
		</style>
	</head>
	<body>
		<div id="hell"></div>
		<script type="text/javascript">
			var a = document.getElementById("hell").style.width;
			console.log(a);	
		</script>
	</body>
</html>

大家可以看上面这段代码,这段代码的输出结果是空

为啥是空呢  

因为啊  通过dom.style.width这种方式只能取到行内属性  也就是写在HTML中的style属性,而不是css属性   如下

        <body>
		<div id="hell" style="height:20px;"></div>
		<script type="text/javascript">
			var a = document.getElementById("hell").style.height;
			console.log(a);	
		</script>
	</body>

非要取css中的值得话 只能变相的取得  如下

var a = document.getElementById("hell").offsetHeight;
console.log(a);	


-------------------------------------------------------------------------------分割线---------------------------------------------------------------------------------------------

最新获取的方法  使用var b = window.getComputedStyle(a).height;  可以动态获取元素的高度    

<think>好的,我现在需要解决用户提到的cropBox.style.height与cropBox.getBoundingClientRect().height不一致的问题。根据用户提供的引用内容,特别是引用[1]和[3],我需要先理解这两个属性之间的差异。 首先,cropBox.style.height获取的是元素通过内联样式设置的height,比如在HTML中直接写style="height: 200px;"。但如果元素的高度是通过CSS类或者其他方式设置的,比如外部样式表或缩放变换(transform),那么style.height可能不会反映实际计算后的高度。这时候,getBoundingClientRect().height会返回元素在页面上的实际渲染高度,包括任何变换的影响,比如缩放、旋转等,这一点引用[1]提到在有缩放时两者会不同。 接下来,用户的问题可能出现在元素的transform属性上,比如scale缩放。例如,如果元素设置了transform: scale(0.5),即使style.height是200px,实际渲染的高度会是100px,这时候getBoundingClientRect().height就会是100px,导致两者不一致。这种情况下,需要检查是否有CSS变换应用在元素上,并考虑使用offsetHeight或clientHeight来替代,但这些属性是否包含变换的影响呢?根据引用[1],offsetWidth/offsetHeight在存在变换时可能与getBoundingClientRect的尺寸不同,所以可能需要进一步确认。 另外,用户可能没有直接设置内联样式,而是通过CSS类设置高度,这时候style.height可能为字符串,因为style属性只能获取内联样式。这时候应该用getComputedStyle获取计算后的样式,但即使这样,如果存在变换,计算后的样式也不会反映变换后的实际尺寸,这时候getBoundingClientRect()会更准确。 其他可能的原因包括盒模型的影响,比如box-sizing属性。如果元素的box-sizing是border-box,那么设置的高度包括padding和border,而getBoundingClientRect().height也会包含这些部分,所以这里可能不是问题。但如果存在溢出内容或子元素导致实际渲染高度变化,也可能导致不一致,但这种情况应该较少见。 解决方案方面,首先需要确认用户是如何设置高度的。如果用户是通过内联样式设置的,并且没有应用任何变换,那么两者应该一致。但如果有变换,或者通过外部样式设置高度,就需要调整获取高度的方法。比如,使用getComputedStyle(cropBox).height获取计算后的样式高度,而getBoundingClientRect().height获取实际渲染高度,同时考虑变换的影响。如果用户需要动态调整元素的高度,可能需要同时修改样式和考虑变换的比例,或者避免使用变换来缩放元素,改用直接设置尺寸。 另外,引用[4]提到在使用某些UI组件时可能遇到getBoundingClientRect的错误,比如元素未正确挂载,但用户的问题可能不涉及这个,而是尺寸计算的问题。需要检查元素是否正确渲染,是否存在display: none或者未添加到DOM树的情况,这可能导致getBoundingClientRect返回0。 总结可能的步骤:检查是否有CSS变换,检查高度设置的方式(内联还是外部),使用正确的属性获取高度,确保元素渲染完成后再获取尺寸,以及考虑盒模型的影响。</think>### 原因分析及解决方案 #### 1. **CSS变换(Transform)导致尺寸差异** - **原因**: 若元素应用了`transform: scale()`等变换属性,`getBoundingClientRect().height`会返回变换后的实际渲染高度,而`style.height`仅反映原始设置。 例如: ```css .cropBox { height: 200px; transform: scale(0.5); } ``` - `cropBox.style.height` → `"200px"` - `cropBox.getBoundingClientRect().height` → `100px` 引用[1]提到**缩放会直接改变渲染尺寸**,但`offsetHeight`和`style.height`不受影响[^1]。 - **解决**: - 若需动态调整元素高度,建议直接修改`height`而非使用`transform`缩放。 - 若必须用变换,需通过比例计算实际高度,例如: ```javascript const scaleFactor = 0.5; cropBox.style.height = `${targetHeight / scaleFactor}px`; cropBox.style.transform = `scale(${scaleFactor})`; ``` #### 2. **非内联样式设置高度** - **原因**: `style.height`仅能获取**内联样式**(即直接写在HTML标签中的`style`属性),若通过CSS类或外部样式表设置高度,该属性返回字符串。此时应使用`getComputedStyle()`获取计算: ```javascript const computedHeight = getComputedStyle(cropBox).height; // 如"200px" ``` - **解决**: - 统一使用`getComputedStyle()`获取样式高度,用`getBoundingClientRect()`获取实际渲染高度,并对比差异。 #### 3. **盒模型(Box Sizing)影响** - **原因**: 若元素设置`box-sizing: border-box`,`style.height`可能包含`padding`和`border`,而`getBoundingClientRect().height`始终包含所有部分。但两者一般表现一致,除非存在内容溢出或子元素撑大容器。 - **解决**: - 检查`box-sizing`属性,确认`padding`和`border`是否影响预期高度。 - 使用`clientHeight`(含padding但不含border)或`offsetHeight`(含padding和border)辅助验证。 #### 4. **元素未完全渲染** - **原因**: 若在元素未挂载到DOM或隐藏(如`display: none`)时获取高度,`getBoundingClientRect()`可能返回0。 - **解决**: - 确保在元素可见且渲染完成后(如`mounted`生命周期或`setTimeout`延迟)再获取高度。 --- ### 操作建议 1. **检查CSS变换**: ```javascript console.log(getComputedStyle(cropBox).transform); // 输出变换属性 ``` 2. **对比不同属性**: ```javascript console.log({ styleHeight: cropBox.style.height, computedHeight: getComputedStyle(cropBox).height, clientHeight: cropBox.clientHeight, rectHeight: cropBox.getBoundingClientRect().height }); ``` 3. **动态修正高度**: ```javascript // 若需同步两者高度,直接设置内联样式 cropBox.style.height = `${cropBox.getBoundingClientRect().height}px`; ``` --- ### 总结表格 | 属性/方法 | 获取内容 | 是否受变换影响 | 是否含padding/border | |---------------------------|----------------------------------|---------------|---------------------------| | `element.style.height` | 内联样式设置的高度 | 否 | 依赖`box-sizing` | | `getComputedStyle().height` | 计算后的样式高度(含外部样式) | 否 | 依赖`box-sizing` | | `element.clientHeight` | 可视区域高度(含padding,不含border) | 否 | 是 | | `element.getBoundingClientRect().height` | 实际渲染高度(含变换) | 是 | 是 | ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值