中心文本和切換可見性

我想用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

中心文本和切換可見性

回答

相關問題