javascript - 用于检测高度和更改填充的脚本

Question

我有一大块文字。文本 block 中有一个标题。它可以是 25 或 50 像素高，具体取决于它是 1 行还是 2 行。标题是 div 内的一个 p 标签，具有 height: auto; 的 css 方面。我正在使用脚本来检测 div 的高度。默认情况下，div 为 1 行高 25。如果是这样，什么都没有改变。如果它是 50 像素高，它应该包括样式标签，其中一些仍在内部更改不同潜水移动文本的填充。我目前正在运行此脚本(它不起作用，这就是我请求帮助的原因):

<script>
$(document).ready(function () {
	if ($('.rtitle').height() == 50) {
	document.write("<style>
    div#raffleinfo {
    	height: 127px;
    	padding-top: 173px;
    }</style>)";
	}
});
</script>

div#raffledisplay {
	height: 300px;
	width: 100%;
	position: relative;
}

div#raffleinfo {
	float: left;
	width: 480px;
	height: 102px;
	padding-top: 198px;
	background-color: red;
}

div#rtitle {
	height: auto;
}

p.rtitle {
	font-size: 35;
	line-height: 25px;
}

p.rinfo {
	font-size: 25;
	line-height: 25px;
}

#progressBar {
	width: 478px;
	height: 25px;
	border: 1px solid #111;
	background-color: #292929;
}

<div id="raffledisplay">
	<div id="raffleinfo">
		<div id="rtitle"><p class="rtitle">$weapon | $skin $stattrack</p></div>
		<p class="rinfo">Quality: $quality</p>
		<p class="rinfo">Price: $price</p>
		<div id="progressBar" class="pbar"><div></div></div>
	</div>
</div>

我不确定如果你运行代码为什么会显示所有奇怪的东西，但在我的网站上它看起来很好...

Answer 1

试试这个

$(document).ready(function() {

  // console.log($('.rtitle').height());
  if ($('.rtitle').height() == 50) {
    $("div#raffleinfo").addClass('larger');
  }
});

div#raffledisplay {
  height: 300px;
  width: 100%;
  position: relative;
}
div#raffleinfo {
  float: left;
  width: 480px;
  height: 102px;
  padding-top: 198px;
  background-color: red;
}
div#raffleinfo.larger {
  height: 127px;
  padding-top: 173px;
}
div#rtitle {
  height: auto;
}
p.rtitle {
  font-size: 35;
  line-height: 25px;
}
p.rinfo {
  font-size: 25;
  line-height: 25px;
  //background-color: green;
}
#progressBar {
  width: 478px;
  height: 25px;
  border: 1px solid #111;
  background-color: #292929;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="raffledisplay">
  <div id="raffleinfo">

    <div id="rtitle">
      <p class="rtitle">$weapon $skin $stattrack xxxxxxxx xx xxx xx  xxxxxxx xxxxxxxxx xxxxxxx xxxxx </p>
    </div>

    <p class="rinfo">Quality: $quality</p>
    <p class="rinfo">Price: $price</p>

    <div id="progressBar" class="pbar">
      <div>
      </div>
    </div>