Question

您好我试图自动缩放按钮底部

但我只收到错误消息

TypeError：backward.style未定义

在我改变左边的另一个功能中，它完美无缺......

function buttonAutoHeight() {
  var clientHeight = document.getElementById('sliderContainer').clientHeight;
  console.log("Die höhe des Sliders ist: " + clientHeight);

  autoBottom = clientHeight / 2 - 20;

  var backward = document.getElementsByClassName("backward");
  var forward = document.getElementsByClassName("forward");
  console.log(backward);
  console.log(forward);
  backward.style.bottom = autoBottom + 'px';
  forward.style.bottom = autoBottom + 'px';

}

buttonAutoHeight();

<div id="sliderContainer">
  <div class="backward"></div>
  <div class="forward"></div>

  <div id="sliderWrapper" class="slider">
    <div id="slide1" class="slider">
      <img src="img/clouds-2517653_1920.jpg" />
    </div>
    <div id="slide2" class="slider">
      <img src="img/drop-of-water-2396748_1920.jpg" />
    </div>
  </div>
</div>

Answer 1

getElementsByClassName()返回元素集合，因此请使用如下索引： -

实施例： -

＆＃13;

function buttonAutoHeight() {
  var clientHeight = document.getElementById('sliderContainer').clientHeight;
  console.log("Die höhe des Sliders ist: " + clientHeight);

  autoBottom = clientHeight / 2 - 20;

  var backward = document.getElementsByClassName("backward");
  var forward = document.getElementsByClassName("forward");
  console.log(backward);
  backward[0].style.bottom = autoBottom + 'px'; // use index [0]
  forward[0].style.bottom = autoBottom + 'px'; // use index [0]

}

buttonAutoHeight();

＆＃13;

<div id="sliderContainer">
  <div class="backward"></div>
  <div class="forward"></div>

  <div id="sliderWrapper" class="slider">
    <div id="slide1" class="slider">
      <img src="img/clouds-2517653_1920.jpg" />
    </div>
    <div id="slide2" class="slider">
      <img src="img/drop-of-water-2396748_1920.jpg" />
    </div>
  </div>
</div>

＆＃13;

注意： - 如果您选中console.log(backward);，您会发现它是一个包含0,1,...等索引的对象。

错误：this.style未定义？

1 个答案: