Question

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

 String kernel = System.getProperty("os.version");

<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;
}

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

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>

Answer 2

尝试此操作，使用您的功能创建自定义类，并在需要时将其添加到元素中。

您的代码无法正常工作的原因是因为DOM已经加载并读取CSS代码。所以当你按照你的方式插入它时，它没有做任何事情，因为它完成了这样做。您只能为已渲染的元素添加元素，但不能添加样式。要为已渲染的元素添加样式，请使用addClass，如下所示。

＆＃13;

$(document).ready(function() {
  if ($('.rtitle').height() == 50) {
    $('#raffleinfo').addClass('customclass');
  }
});

＆＃13;

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;
}
.customclass {
  height: 127px;
  padding-top: 173px;
}

＆＃13;

<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</p>
    </div>
    <p class="rinfo">Quality: $quality</p>
    <p class="rinfo">Price: $price</p>
    <div id="progressBar" class="pbar">
      <div></div>
    </div>
  </div>
</div>

＆＃13;

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

2 个答案: