创建元素后，如何设置元素高度的包装器？

Question

我在HTML中创建了一个包装器.slider-wrapper，并使用JavaScript在其中创建了一张图像，到目前为止，我已经将图像的宽度设置为.slider-wrapper的宽度，现在我希望将.slider-wrapper的高度设置为图像的高度

我已经尝试过在move()方法中执行sliderWrapper.style.height = sliderWrapper.children.offsetHeight，但它没有生效。

创建图像时，如何将.slider-wrapper的高度设置为图像的高度？

document.addEventListener('DOMContentLoaded', function (event) {
let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
class Image {
sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
constructor(_src) {
this.src = _src;
this.width = window.getComputedStyle(sliderWrapper).width;
this.move()
}
}
Image.prototype.move = function () {
let img = document.createElement('img');
img.setAttribute("src", this.src);
img.style.width = this.width;
img.classList.add('img');
sliderWrapper.appendChild(img);
sliderWrapper.style.height = sliderWrapper.children.offsetHeight;
}
let img = new Image('https://via.placeholder.com/150')
});

*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider-wrapper{
position: relative;
max-width: 800px;
margin: 70px auto;
border: 2px solid #ff0000;
}

<div class="slider-wrapper">
</div>

Answer 1

类Image已经存在于JS中。创建自己的新类。然后使用加载

document.addEventListener('DOMContentLoaded', function (event) {
let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
class SlideImage {
sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
constructor(_src) {
this.src = _src;
this.width = window.getComputedStyle(sliderWrapper).width;
this.move()
}
}
SlideImage.prototype.move = function () {
const image = new Image();
image.src = this.src;
image.classList.add('img');
image.onload = function() {
sliderWrapper.appendChild(image);
sliderWrapper.style.height = image.height;
console.log(image.height)
}
}
new SlideImage('https://via.placeholder.com/150')
});

Answer 2

使用img.onload检查img是否已完成加载。同时使用children[0]。

document.addEventListener('DOMContentLoaded', function(event) {
let sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
class Image {
sliderWrapper = document.getElementsByClassName('slider-wrapper')[0];
constructor(_src, _id) {
this.src = _src;
this.id = _id;
//remove to get the actual proportions
// this.width = window.getComputedStyle(sliderWrapper).width;
this.move()
}
}
Image.prototype.move = function() {
let img = document.createElement('img');
img.setAttribute("src", this.src);
img.style.width = this.width;
img.classList.add('img');
sliderWrapper.appendChild(img);
img.onload = function() {
sliderWrapper.style.height = sliderWrapper.children[0].offsetHeight;
}
}
let img = new Image('https://via.placeholder.com/150')
});

* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider-wrapper {
position: relative;
max-width: 800px;
margin: 70px auto;
border: 2px solid #ff0000;
}

<div class="slider-wrapper">
</div>