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

【问题标题】：How can I set the wrapper of an element's height after the element has been created?创建元素后如何设置元素高度的包装？
【发布时间】：2021-05-14 05:45:27
【问题描述】：

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

我已经尝试在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>

【问题讨论】：

标签： javascript class methods

【解决方案1】：

JS 中已经存在 Image 类。创建自己的新班级。然后使用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')
});

【讨论】：

【解决方案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>

【讨论】：