スタイルを変更できません：getelementbyclassnameを使用した表示

Question

document.getElementByClassName('xyz').style.display = 'none'; 

クラスコンテンツを非表示にすることはできません。

Answer 1

function show(){ 
 
var element = document.getElementsByClassName('elem'); 
 
console.log(element); 
 
element[0].style.display = 'block'; 
 
}

.elem { 
 
    display: none; 
 
}

<div> visible 
 
    <div class="elem">hidden 
 
    </div> 
 
    <button type="button" onclick="show()">click</button> 
 
</div>

getElementsByClassName配列を返し、あなたは直接のような要素のスタイルを設定することはできません。

Answer 2

document.getElementsByClassNameオブジェクトのような配列を返します。 let elem = document.getElementsByClassName('xyz')[0];

elem.style.display = 'none';

Answer 3

を非表示にする場合は、以下のスクリプトを使用することができます

hide = function(){ 
 
document.getElementsByClassName('xyz')[0].style.display="none"; 
 
}

<input class="xyz" type="text"/> 
 

 
<button onclick="hide();">Click to hide!</button>

Answer 4

ワーキングバージョン：あなたはこの

document.getElementsByClassName('xyz')[0].style.display = 'none'; 

またはあなたが好きな何かを行うために必要なすべての.xyz要素

var x = document.getElementsByClassName("xyz"); 
var i; 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = 'none'; 
} 

Answer 5

document.getElementsByClassName要素が見つかりました。要素のライブHTMLCollectionです。

<div class="xyz"> 
 

 
test content 
 
</div> 
 
<button type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = 'none';">Hide Content </button> 
 
<button type="button" onclick="document.getElementsByClassName('xyz')[0].style.display = '';">Show Content </button>

Answer 6

あなたは本当に物事をこの方法を実行したい場合は、もちろん、最初のあなたは正しくgetElementsByClassNameをスペルする必要があります。あなたはコンソールでこのエラーを見ましたか？次に、getElementsByClassNameが配列のようなものを返すことを知る必要があります。あなたはドキュメントの中でそれを見ましたか？だから、あなたはそれをループするか、最初の要素を[0]などで取る必要があります。

一般的に、このようにDOMから要素を取得し、そのスタイルを直接設定することは悪い習慣です。代わりに、あなたの仕事の90％を行うCSSを活用してください。

<main id="main"> 
    <div class="xyz"></div> 
<main> 

はその後、あなたが必要とする、xyz要素を非表示にするには

main.hide-xyz .xyz { display: none; } 

として、あなたのCSSを記述しますことをここでは、私は行動を制御する単一の上位クラスを使用したい、とだけ設定します単一JS声明：

document.getElementById("main").classList.add("hide-xyz"); 

は、それを削除するには、次の

document.getElementById("main").classList.remove("hide-xyz"); 

それともトグル：あなたはこのスタイルの周りにあなたの頭をラップすると

document.getElementById("main").classList.toggle("hide-xyz"); 

することは、あなたはDOMの検索やループやスタイルの設定のすべての種類に必要ずっと少ないJavaScriptを書いて自分自身を見つけることができます。