Question

我正在尝试使用html / Javascript来居中一些文本，然后在3秒的等待时间之后在可见和不可见之间切换。我在用包含setTimeout()的JS中的函数，用于在3s后更改显示属性。然而，虽然我尝试了无数的解决方案，但文本既不会出现也不会垂直居中。以下是我到目前为止的情况：

＆＃13;

function myfunction() {
  document.getElementsByClassName("parent-class").style.display = "table";
  document.getElementById("h3").style.display = "table-cell";
  setTimeout(function() {
    document.getElementById("h3").style.display = "none";
  }, 3000);
};
myfunction();

＆＃13;

.parent-class {
  width: 100%;
  height: 100%;
  text-align: center;
}

.parent-class>h3 {
  vertical-align: middle;
}

＆＃13;

<div class="parent-class" style="display:none">
  <h3>+</h3>
</div>

＆＃13;

如果我没有设置属性＆＃34; display：none＆＃34;对于父类，文本（十字）错误地出现在我的程序的第一页上。不知道从哪里开始，因为感觉我尝试了许多显示类型和元素配置。请帮忙！

Answer 1

document.getElementsByClassName("parent-class")返回一个元素数组（getElement s ）。由于没有ID h3，document.getElementById("h3")将不返回任何内容。

要使文本居中，您是否考虑过flexboxes？

检查这个小提琴：https://jsfiddle.net/fokq0btv/

此外，请考虑使用document.querySelector代替旧document.getElementBy...

Answer 2

您的代码存在一些问题。一个是你没有得到一个由类名返回的元素，所以我将它切换为getElementById。你也没有id＆＃34; h3＆＃34;的元素，最后你没有调用myfunction（）。

＆＃13;

function myfunction() {
  document.getElementById("parent-class").style.display = "table";
  document.getElementById("h3").style.display = "table-cell";
  setTimeout(function() {
    document.getElementById("h3").style.display = "none";
  }, 3000);
};
myfunction();

＆＃13;

.parent-class {
  width: 100%;
  height: 100%;
  text-align: center;
}

#h3 {
  vertical-align: middle;
}

＆＃13;

<div id="parent-class" style="display:none">
  <h3 id="h3">+</h3>
</div>

＆＃13;

Answer 3

要通过标记（或任何选择器）获取元素，请使用document.querySelector()，并将参数传递给选择器，例如：

document.querySelector(".parent-class")
document.querySelector("#example-id")
document.querySelector("h3")

要使元素垂直/水平居中，请使用以下样式：

.parent-class {
    width: 200px;
    text-align: center; /* horizontal center */
    position: absolute;
    height: 200px; 
    background: #000; /* its a example */
    color: #fff; /* its a example */
}

.parent-class > h3{
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* here is the magic */
}

PS：父母必须为absolute并且具有定义的身高/宽度，且两者必须为inline-block

遵循以下代码：

function myfunction() {
  document.querySelector(".parent-class").style.display = "inline-block";
  document.querySelector("h3").style.display = "inline-block";
  setTimeout(function() {
    document.querySelector("h3").style.display = "none";
  }, 3000);
};
myfunction();

 

/* reset CSS */
* {
    padding: 0;
    margin: 0; 
}

.parent-class {
    width: 200px;
    text-align: center; /* horizontal center */
    position: absolute;
    height: 200px; 
    background: #000; /* its a example */
    color: #fff; /* its a example */
}

.parent-class > h3{
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* here is the magic */
}

<div class="parent-class" style="display:none">
  <h3>+</h3>
</div>

中心文字和切换可见度

3 个答案: