Question

我目前有这个HTML节点：

body
  div.part-1
  div.part-2

默认情况下，两个div的高度为0。如果我在CSS中定义每个div的高度，就像：

.part-1
  height: 200px
.part-2
  height: 300px

当div显示时，它们会显示定义的CSS高度（200px和300px）。

但是当样式转到Javascript时，我遇到了一些问题，这是我的JS：

p1 = document.getElementsByClassName('part-1');
p2 = document.getElementsByClassName('part-2');

p1.style.height = '200px';
p2.style.height = '300px';

我的问题是：当div出现时，它们首先出现在0高度，然后是高潮，高度立即增加到JS中定义的高度（200px和300px高度）。它们没有正确显示JS定义的高度，但它们首先出现在高度为0px的位置。

我想要实现的结果是，当我通过Javscript为HTML元素定义样式时，它只显示元素的“已定义”样式（而不是“未定义”样式）。

有什么方法可以达到结果吗？非常感谢你。

Answer 1

您可以尝试将元素设置为display：none，然后使用javascript添加display：inherit。

Answer 2

尝试将所有内容放在iffy中，然后将JavaScript放在body标记的末尾

(function(){
p1 = document.getElementsByClassName('part-1');
p2 = document.getElementsByClassName('part-2');
p1[0].style.height = '200px';
p2[0].style.height = '300px';	
}())

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS height</title>
</head>
<body>
  <div class="part-1">
  	<p>part1</p>
  </div>
  <div class="part-2">
	 <p>part2</p>
	</div>
</body>
</html>

此外getElementsByClassName返回一个类似于object的数组，因此您必须选择第一个项来获取元素，querySelector()将是更好的选择。

Answer 3

像这样使用querySelector。因为getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象。所以你可以通过index访问。

p1 = document.querySelector('.part-1');
p2 = document.querySelector('.part-2');

p1.style.height = '200px';
p2.style.height = '300px';

Answer 4

您可以尝试使用此jquery来更新div的高度。

$(document).ready(function()
{
  $(".part-1").css("height","200px");
  $(".part-2").css("height","300px");
});

或你可以试试这样的东西来保持顺畅

$(document).ready(function() { $(".part-1").animate({height: "200px"}); $(".part-2").animate({height: "300px"}); });

在显示元素之前的Javascript样式

4 个答案: