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

Question

I created a wrapper in my HTML, .slider-wrapper , and using JavaScript, I created an image inside it, so far I've set the image's width to the .slider-wrapper 's width and now I want the .slider-wrapper 's height to be set to the image's height,

I've already tried doing sliderWrapper.style.height = sliderWrapper.children.offsetHeight in the move() method but it's not taking effect.

How can I set the .slider-wrapper 's height to the image's height when the image is created?

 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

Use img.onload to check if the img has finished loading. Also use 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>

Answer 2

the class Image already exists in JS. create your own new class. Then use onload

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')
});