創建元素后如何設置元素高度的包裝？

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

使用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>

Answer 2

class 圖像已存在於 JS 中。 創建您自己的新 class。 然后使用 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')
});