我想把页面中每个文本框的高度

Question

我在征求意见。 在我正在处理的页面上，有几个“Div”，其中有“文本框”和“背景图片”。

我想带上页面中每个文本框的高度。 框的高度取决于文本的数量。 每个文本框的高度值都作为“背景图片”的边距值。

但是，当前的代码似乎只引入了一个特定文本框的代码。

http://client.1-2-3-4-5.studio/ppeaches/

var myHeight = $(".text-box").innerHeight() + 'px'; 

$(".bg").attr("style", 'margin-top: -' + myHeight + ";");

console.log(myHeight);

* {
  margin: 0;
  padding: 0
}

.demo {
  background-color: blue;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.demo.box-one {
    background: grey;
}

.demo.box-two {
    background: beige;
}

.demo.box-three {
    background: blue;
}

.demo.box-four {
    background: pink;
}

.demo.box-five {
    background: orange;
}

.demo.box-six {
    background: green;
}


.offset {
  height: 500px;
}

.green {
  background-color: green;
}

.black {
  background-color: black;
}

.orange {
  background-color: orange;
}

.top {
  background-color: red;
  position: relative;
}

.top .text-box {
  position: fixed;
  top: 0;
  left: 3vw;
  font-size: 10vw;
}

.bg {
    width: 100%;
    height: 100%;
    position: sticky;
    z-index: 99;
    display: block;
    margin-top: var(--height);
    background-position: center center;
    background-size: cover;
}

img {
    height: 100%;
    width: 100%;
}

.text-box {
    position: sticky;
    top: 0;
    left: 3vw;
    font-size: 10vw;
    line-height: 11vw;
    margin-bottom: -2vw;
    z-index: 9999999;
    width: auto;
    height: auto;
    display: block;
}

.stick {
  position:fixed;
  top:0px;
  }

<div class="boxset">
    <div class="demo" touching="top">
      <span class="text-box">Danh Vo
      Selected Bibliograph
    2007 – 2015</span>
      <span class="bg"><img src="http://archiv11.org/WordPress/wp-content/uploads/2015/08/00-DANH-VO-Biblio-IMG_2109-w1200.jpg"></span>
    </div>
    <div class="demo box-one" touching="top">
      <span class="text-box">Installation view of Danh Vo
      Uuntitled at the South London Gallery, 2019.</span>
      <span class="bg"><img src="https://artmap.com/static/media/0000129000/0000128091.jpg"></span>
    </div>
    <div class="demo box-two" touching="top">
      <span class="text-box">Blauorange 2007</span>
      <span class="bg"></span>
    </div>
    <div class="demo box-three" touching="top">
      <span class="text-box">Danh Vo
      Selected Bibliograph
    2007 – 2015</span>
      <span class="bg"></span>
    </div>
    <div class="demo box-four" touching="top">
      <span class="text-box">Félix González-Torres
      "Untitled" (Portrait of Julie Ault)</span>
      <span class="bg>
    </div>
    <div class="demo box-five" touching="top"></div>
    <div class="demo box-six" touching="top"></div>
    <div class="demo box-seven" touching="top"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
</div>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/jquery-3.3.1.min.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/ajax/jquery.min.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/jquery.hypher.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/en-us.js'></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.5/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您的代码存在以下问题：

1. 您正在尝试获取$(".text-box") 中所有元素的高度值而不对其进行迭代；
2. 您正在尝试对这些元素使用不存在的 innerHeight() 函数；
3. 当您尝试为$(".bg") 中的元素设置属性时，会发生第一项中指出的相同情况。

看来您确实需要更好地了解 JavaScript 基础知识。

在下面的代码中，我遍历文本框并将每个文本框的高度值收集到一个数组中。要获取这些值，我使用函数getBoundingClientRect()。然后，我通过 jQuery css() 函数遍历新创建的数组，为每个 .bg 元素设置 margin-top 样式。

var textboxesHeight = $(".text-box").get().map(textbox => {
  return textbox.getBoundingClientRect().height + 'px';
});

textboxesHeight.forEach((val, i) => {
  $(".bg").eq(i).css("margin-top", '-' + val);
  console.log(val);
});

* {
  margin: 0;
  padding: 0
}

.demo {
  background-color: blue;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.demo.box-one {
    background: grey;
}

.demo.box-two {
    background: beige;
}

.demo.box-three {
    background: blue;
}

.demo.box-four {
    background: pink;
}

.demo.box-five {
    background: orange;
}

.demo.box-six {
    background: green;
}


.offset {
  height: 500px;
}

.green {
  background-color: green;
}

.black {
  background-color: black;
}

.orange {
  background-color: orange;
}

.top {
  background-color: red;
  position: relative;
}

.top .text-box {
  position: fixed;
  top: 0;
  left: 3vw;
  font-size: 10vw;
}

.bg {
    width: 100%;
    height: 100%;
    position: sticky;
    z-index: 99;
    display: block;
    margin-top: var(--height);
    background-position: center center;
    background-size: cover;
}

img {
    height: 100%;
    width: 100%;
}

.text-box {
    position: sticky;
    top: 0;
    left: 3vw;
    font-size: 10vw;
    line-height: 11vw;
    margin-bottom: -2vw;
    z-index: 9999999;
    width: auto;
    height: auto;
    display: block;
}

.stick {
  position:fixed;
  top:0px;
  }

<div class="boxset">
    <div class="demo" touching="top">
      <span class="text-box">Danh Vo
      Selected Bibliograph
    2007 – 2015</span>
      <span class="bg"><img src="http://archiv11.org/WordPress/wp-content/uploads/2015/08/00-DANH-VO-Biblio-IMG_2109-w1200.jpg"></span>
    </div>
    <div class="demo box-one" touching="top">
      <span class="text-box">Installation view of Danh Vo
      Uuntitled at the South London Gallery, 2019.</span>
      <span class="bg"><img src="https://artmap.com/static/media/0000129000/0000128091.jpg"></span>
    </div>
    <div class="demo box-two" touching="top">
      <span class="text-box">Blauorange 2007</span>
      <span class="bg"></span>
    </div>
    <div class="demo box-three" touching="top">
      <span class="text-box">Danh Vo
      Selected Bibliograph
    2007 – 2015</span>
      <span class="bg"></span>
    </div>
    <div class="demo box-four" touching="top">
      <span class="text-box">Félix González-Torres
      "Untitled" (Portrait of Julie Ault)</span>
      <span class="bg>
    </div>
    <div class="demo box-five" touching="top"></div>
    <div class="demo box-six" touching="top"></div>
    <div class="demo box-seven" touching="top"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
    <div class="demo" touching="top"></div>
    <div class="demo" touching="green"></div>
    <div class="demo" touching="black"></div>
    <div class="demo" touching="orange"></div>
</div>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/jquery-3.3.1.min.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/ajax/jquery.min.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/jquery.hypher.js'></script>
<script type="text/javascript" src='https://sommm.kr/onetwothreefourfive/js/en-us.js'></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.5/isotope.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>