JavaScriptで隠し要素を表示する方法HTML

Question

私のdivはhidden = "true" with hiddenで表示されていますが、 ボタンをクリックして表示します。

私はNode.jsを使用しており、この部分はJavascriptで記述する必要があります。

HTML：

div class="sideDiv" hidden="true"> 

のjavascript：

私はショーでそれを試してみました（）が、それは動作しません。

socket.on('loginInServer',function(data){ 
     $('.sideDiv').show(); 
    }); 

Answer 1

としては、上記の言ったと隠す：は前の回答に加えてhidden

$('.sideDiv').attr('hidden', false); 

$('.sideDiv').prop('hidden', false); 

Answer 2

$('.sideDiv').attr('hidden', false); 

しかし、あなたはおそらく、正直、私は誰もが（隠されたフォームフィールド以外の）を使用して見ていない隠し属性を使用していない最初の場所でそれを非表示にします。

.sideDiv{display: none;} 

それとも、怠け者場合は、HTMLの要素自体にこれを埋め込むことができます：あなたのページその後

<div class="sideDiv" style="display: none"></div> 

最も簡単な方法は、あなたのCSSでこれを持っていることですjQuery関数がDOM要素の "表示"スタイルで動作するので、.show（）を使って何をしているのかはわかりません。

Answer 3

removeAttr()メソッドを使用して属性を削除します。

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').removeAttr('hidden'); 
}); 

---

または attr()方法を使用してfalseに属性を更新します。

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').attr('hidden', false); 
}); 

---

または prop()方法を使用して偽のプロパティを設定します。 FYI

ocket.on('loginInServer',function(data){ 
    $('.sideDiv').prop('hidden', false); 
}); 

---

：より良い方法だろうし、後であなたがshow()メソッドを使用して表示することができCSS display:none;を設定する要素を隠すため。

Answer 4

スタイル"display:none"と属性hidden="true"のレンダリング方法が異なります。

hidden

隠しグローバル属性は、要素がまだないん、または、もはや適切であることを示すブール値の属性です。たとえば、ログインプロセスが完了するまで使用できないページの要素を隠すために使用できます。ブラウザーは隠し属性が設定された要素を表示しません。

jQueryのshowは、要素のstyleを変更し、属性hidden

show

に変更されることはありません...これはブロック」、（ "表示" の.css呼び出すのとほぼ同じです"）...

jQueryのattrまたはを使用します。あなたが隠し属性を取り除く必要があり、

document.querySelector(".sideDiv").setAttribute("hidden", "false"); 

Answer 5

は、あなたが平野JSでも、それを行うことができ、属性を変更します代わりにcssを使用してください。

.sideDiv { 
    display: none; 
} 

jqueryのshow（）メソッドが機能します。