JavaScriptでクラス名を持つdivを非表示にする方法

Question

私はこのdivクラスの可視性を隠そうとしていますが、私が書いたjavascriptコードは機能しませんでした。この状況でどうすればよいですか？

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4"> 
 
    <label>Question? </label> 
 
Nein 
 
</div> 
 

 

 

 
<script> 
 
document.getElementsByClassName("form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4").style.visibility = '"hidden"; 
 
</script>

Answer 1

それはスペースを有する単一のクラス名ではありません三つ

1. がありますが、それはあなたが余分な単一引用符を入れている単一のdiv

2. の4つの異なるクラスです二重引用符の前に。

3. のgetElementsByClassNameは、あなたが理想的には、インデックス

を指定する必要があるので、配列を返し、それが

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4"> 
 
<label>Question? </label> 
 
Nein 
 
</div> 
 

 

 
<script> 
 
document.getElementsByClassName("form-item")[0].style.visibility = "hidden"; 
 
</script>

それとも、我々はそれを書く場合は、あなたのよう

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4"> 
 
<label>Question? </label> 
 
Nein 
 
</div> 
 

 

 
<script> 
 
document.getElementsByClassName("form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4")[0].style.visibility = "hidden"; 
 
</script>

する必要があります 0あなたは、インデックスが欠落していた

はgetElementsByClassName後に指定すると、追加'

Answer 2

document.getElementsByClassNameはあなたの要素の配列を返します。あなたはクラスのものを組み合わせて一つの要素を持っているあなただけの、あなたが

document.getElementsByClassName 
("form-item webform-component webform-component-display 
    webform-component--1-contact-1-bg20-custom-4")[0].style.visibility = "hidden"; 

Answer 3

document.getElementsByClassName()を試すことができることを確信しているのであれば提供される正確なクラス（複数可）を持っている要素の配列を返します。

状況によっては、返される配列の最初の要素を選択する必要があります。

var elements = document.getElementsByClassName("form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4"); 
 

 
elements[0].style.visibility = "hidden";

<div class="form-item webform-component webform-component-display webform-component--1-contact-1-bg20-custom-4"> 
 
    <label>Question? </label> 
 
Nein 
 
</div>