html三个加了绝对定位元素能让倒数第一个元素的顶部距离等于前两个元素顶部距离和自身高度之和的动态js代码
时间: 2024-09-22 19:02:59 浏览: 31
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
在HTML中,如果你想通过JavaScript动态控制三个绝对定位元素让最后一个元素的顶部位置等于前两个元素顶部距离之和加上其自身的高度,你可以这样做:
首先,假设你的元素结构类似这样:
```html
<div id="element1" style="position: absolute;"></div>
<div id="element2" style="position: absolute;"></div>
<div id="element3" style="position: absolute;"></div>
```
然后,你可以编写如下的JavaScript代码:
```javascript
// 获取元素
var element1 = document.getElementById('element1');
var element2 = document.getElementById('element2');
var element3 = document.getElementById('element3');
// 定义元素的高度变量
var elementHeight3 = parseInt(element3.style.height);
// 获取前两个元素的顶部距离并相加
var topDistance = parseInt(window.getComputedStyle(element1).top) +
parseInt(window.getComputedStyle(element2).top);
// 设置元素3的top属性
element3.style.top = topDistance + 'px'; // 如果不想包含滚动条高度,可以减去scrollTop
// 如果需要实时监听元素高度变化,添加事件监听器
element1.addEventListener('resize', updatePosition);
element2.addEventListener('resize', updatePosition);
function updatePosition() {
topDistance = parseInt(window.getComputedStyle(element1).top) +
parseInt(window.getComputedStyle(element2).top);
element3.style.top = topDistance + elementHeight3 + 'px';
}
```
这个代码片段会确保每次前两个元素的大小改变时,第三个元素都会自动调整到正确的位置。记得替换`id`为实际元素的ID,并根据实际需求调整单位(如px转换为rem)。
阅读全文