中心文本和切换可见性

我想用html/Javascript将一些文本居中，然后在3秒的等待时间之后在可见和不可见之间切换它。我在包含setTimeout()的JS中使用函数来更改3秒后的显示属性。然而，尽管我已经尝试过无数的解决方案，但文本既不会出现也不会垂直居中以下是我迄今为止：中心文本和切换可见性

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();

.parent-class { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.parent-class>h3 { 
 
    vertical-align: middle; 
 
}

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

如果我不设置属性“显示：无”父类，文本（跨）错误地出现在第一我的程序页面。不知道该从哪里出发，因为这感觉就像我尝试了许多显示器类型和元素配置。请帮忙！

来源

2017-10-06 c0deBr0

H3是不该元素的ID - 这是一个标记 – Johannes

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

要将文本置于中心位置，您是否考虑了Flexbox？

检查此琴：https://jsfiddle.net/fokq0btv/

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

来源

2017-10-06 14:31:07 sjahan

谢谢！将父级设置为“flex”就像魅力一样工作。我也很欣赏设置ID和类的指针。我很新的JavaScript/HTML。 – c0deBr0

很高兴能帮到你！如果您对柔光箱的了解不是很好，请阅读以下文章：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/ 柔光箱非常酷，可以轻松布置出色的布局！ – sjahan

有几件事情你的代码错误。一个是你没有得到类名返回的元素，所以我已经将它切换到getElementById。你也没有ID为“h3”的元素，最后你没有调用myfunction（）。

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();

.parent-class { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
#h3 { 
 
    vertical-align: middle; 
 
}

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

来源

2017-10-06 14:37:41 HomerPlata

这是为了指出这些！这段代码解决了切换的可见性问题，但最终我用sjahan建议的flexbox来居中文本。出于某种原因，我遇到了vertical-align：middle问题。 – c0deBr0

要由标签（或任何选择器）使用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>

来源

2017-10-06 14:54:11

中心文本和切换可见性

回答

相关问题