我编写 JavaScript/TypeScript 函数:
function setElementsHeightsEqual(el1: HTMLElement, el2: HTMLElement) {
...
}
这是典型的情况,当您想要将某个按钮 (el2) 动态附加到某个输入 (el1) 时。
我想让 el2 的高度等于 el1,但我做不到。 有两个问题:
所有可能返回高度的调用对我来说都是无能为力的:
el1.offsetWidth; // will return 0 if document is not rendered yet el1.style.height; // will return "" if it is set inside external CSS el1.style.paddingTop; // the same el1.style.paddingBottom; // the same
换句话说,是否有可能计算某些指定元素的高度?
- 如何设置 el2 的高度?我们甚至不知道它的“box-sizing”,与 (1) 中的问题相同。
这些任务在 JS + HTML DOM 中是不可能完成的吗?
最佳答案
offsetHeight 是一种安全的方式。如果未加载该元素,请将您的函数调用移至 window.onload。
这里有一个工作示例:
function setMaxHeight(...elements) {
console.log(elements);
// Get max height
var height = 0;
for(let element of elements) {
console.log(element.offsetHeight);
if(element.offsetHeight > height) height = element.offsetHeight;
}
// Change all elements height to max.
for(let element of elements) {
element.style.height = height + 'px';
}
}
window.onload = function() {
var object1 = document.querySelector('.object1');
var object2 = document.querySelector('.object2');
var object3 = document.querySelector('.object3');
setMaxHeight(object1, object2, object3);
};
.object1 {
border: 1px solid #000;
display: block;
float: left;
height: 50px;
width: 20%;
}
.object2 {
border: 1px solid #0cc;
display: block;
float: left;
height: 120px;
width: 30%;
}
.object3 {
border: 1px solid #afc;
display: block;
float: left;
height: 20px;
width: 10%;
}
<div id="container">
<div class="object1">Text</div>
<div class="object2">Text2</div>
<div class="object3">Text3</div>
</div>
比较使用和不使用 Javascript 部分的运行情况。
希望对您有所帮助。
关于javascript - 使 DOM 元素的高度相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42749401/