センターテキストと表示の切り替え

Question

html/Javascriptを使用してテキストを中央に配置し、3秒の待機時間後に表示と非表示の切り替えを試みています。私はsetTimeout()を含むJSの関数 を使って、3s後に表示プロパティを変更しています。しかし、私は無数の解決策を試してきましたが、テキストは表示されず垂直方向の中央にも表示されません。

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>

私はプロパティ「表示：なし」に設定しない場合：親クラスには、テキスト（クロス）が最初に誤って表示されますここに私はこれまで持っているものです私のプログラムのページ。私は多くの表示タイプと要素の設定を試したように感じるので、ここからどこに行くのかはわかりません。助けてください！

Answer 1

document.getElementsByClassName("parent-class")は、要素の配列（getElement s）を返します。 document.getElementById("h3")は、ID h3が存在しないため何も返しません。

テキストを中央に配置するには、フレックスボックスを考慮しましたか？

チェックこのフィドル：https://jsfiddle.net/fokq0btv/

また、あなたのコードが間違って物事のカップルがあった代わりに、古いdocument.getElementBy...

Answer 2

のdocument.querySelectorの使用を検討してください。 1つは、クラス名によって返される要素を取得していないため、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>

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ことと定義された高さ/幅を持っている、と2つの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>