Блог

Главная - Вопросы по программированию - Я хочу указать высоту каждого текстового поля на странице

Я хочу указать высоту каждого текстового поля на странице

#javascript #jquery #css

Вопрос:

Я прошу совета. На странице, над которой я работаю, есть несколько «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>

Ответ №1:

У вас есть следующие проблемы в вашем коде:

  1. Вы пытаетесь получить значение высоты всех элементов, $(".text-box") не повторяя его;
  2. Вы пытаетесь использовать несуществующую innerHeight() функцию для этих элементов;
  3. То же самое, что указано в первом пункте, происходит, когда вы пытаетесь установить атрибут для элементов в $(".bg") .

Похоже, вам действительно нужно лучше понять основы JavaScript.

В приведенном ниже коде я перебираю текстовые поля и собираю значение высоты каждого из них внутри массива. Чтобы получить значения, я использую функцию getBoundingClientRect() . Затем я перебираю вновь созданный массив, чтобы задать margin-top стиль для каждого .bg элемента с помощью функции jQuery css() .

 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>

Комментарии:

1. Да, я учусь… Ваш совет был мне полезен. Я внимательно прочитаю его и изучу. Спасибо.

Метки: