Используйте JS, чтобы изменить высоту div в зависимости от содержимого - PullRequest
Новая
       18

Используйте JS, чтобы изменить высоту div в зависимости от содержимого

0 голосов
/ 12 ноября 2018

Я пытаюсь создать простой баннер, который может изменять высоту в зависимости от объема текста в заголовке и подзаголовке.

Итак, у нас есть 2 элемента, как указано выше.

заголовок 1 и заголовок 2 (подзаголовок).

Если заголовок превышает 1 строку, а подзаголовок - 1 строка, баннер будет иметь высоту 258 пикселей Если заголовок превышает 2 строки, а подзаголовок - 1 строка, баннер будет иметь высоту 314 пикселей Если заголовок превышает 3 строки, а подзаголовок - 1 строка, баннер будет иметь высоту 370 пикселей

Theres также сценарий: Если заголовок превышает 1 строку, а подзаголовок - 2 строки, баннер будет иметь высоту 298 пикселей Если заголовок превышает 2 строки, а подзаголовок - 2 строки, баннер будет иметь высоту 354 пикселя. Если заголовок превышает 3 строки, а подзаголовок - 2 строки, баннер будет иметь высоту 405 пикселей

Итак, я знаю, что высота всегда увеличивается на 56px для каждого случая.

Вот что было сделано до сих пор:

var hl11sub = 258; // Это высота самого маленького баннера var hl21sub = 314; // 56px это то, насколько он увеличивается по высоте каждый раз, когда комбо head & sub увеличивается var hl31sub = 370; 

var hl12sub = 298; // This is the height of the banner when there is 1hl and 2 subheadlines
var hl22sub = 354; // This is the height of the banner when there is 2hl and 2 subheadlines
var hl32sub = 405; // This is the height of the banner when there is 3hl and 2 subheadlines

var hLFontSizeCSS = window.getComputedStyle(headlineText, null).getPropertyValue("font-size");
var hL2FontSizeCSS = window.getComputedStyle(headline2text, null).getPropertyValue("font-size");
var bannerHeightCSS = window.getComputedStyle(banner, null).getPropertyValue("height");
var headlineHeight = headlineText.offsetHeight;
var hL2HeadHeight = headline2text.offsetHeight;

var headHeight = headlineText.style.lineHeight = parseInt(hLFontSizeCSS) + 10 + "px";
var hL2Height = headline2text.style.lineHeight = parseInt(hL2FontSizeCSS) + 10 + "px";

// Text Height values
var hL1LineHeight = parseInt(headHeight); // 8 is line height & padding
var hL2LinesHeight = parseInt(headHeight)*2;
var hL3LinesHeight = parseInt(headHeight)*3;

// HL2 height values
var hL2TextOver1LineHeight = parseInt(hL2Height); // 8 is line height & padding
var hL2TextOver2LineHeight = parseInt(hL2Height)*2;

if(headlineHeight == hL1LineHeight && hL2HeadHeight == hL2TextOver1LineHeight){
  banner.style.height = hl11sub + "px";
}
else if(headlineHeight == hL2LinesHeight && hL2HeadHeight == hL2TextOver1LineHeight){
  banner.style.height = hl21sub + "px";
}
else if(headlineHeight >= hL3LinesHeight && hL2HeadHeight == hL2TextOver1LineHeight){
  banner.style.height = hl31sub + "px";
}
else if(headlineHeight == hL1LineHeight && hL2HeadHeight == hL2TextOver2LineHeight){
  // Single headline with 2 lines sub
  banner.style.height = hl12sub + "px";
}
else if(headlineHeight == hL2LinesHeight && hL2HeadHeight == hL2TextOver2LineHeight){
  // 2 headlines with 2 lines sub
  banner.style.height = hl22sub + "px";
}
else if(headlineHeight == hL3LinesHeight && hL2HeadHeight == hL2TextOver2LineHeight){
  banner.style.height = hl32sub + "px";
  // 3 headlines with 2 lines sub

}

Я все еще новичок в JS, поэтому я написал, что это самый простой способ, которым я мог думать, и он работает нормально, но это, конечно, ручной способ написания вещей и хотел бы получить совет по улучшению (таким образом, который мог бы потенциально работать для шрифтов разных размеров?).

Вот КП - https://codepen.io/nolimit966/pen/jQrygg?editors=1111

Любая помощь будет очень признательна.

...