javascriptを使用して表示プロパティを変更すると、フォーマットが正しく行われない

Question

JavaScriptが有効な場合にのみ表示する必要があるウェブページの一部です。

私は次のことを試してみました：

方法1：私にはJavaScriptをオーバーライドすることで動作するかどうか、それを変更し、その後display: hidden;にクラスを設定...

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
    document.getElementById('only-show-if-js-enabled').style.display = 'block';}); 
//]]> 
</script> 

とも

方法2：idを1に変更して、ブロック（または自動）として表示が設定されている。

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
    $("#js-not-enabled").attr('id', 'js-enabled'); 
}); 
//]]> 
</script> 

どちらの方法は、最初は、リストスタイルはなしというのが私のCSSを無視し、めちゃめちゃにする実際の書式を起こしているように見える、そのオーバーフロー目は隠されています。

何が起こっているのですか？

更新： むしろ恥ずかしいことに、オーバーフローがautoに設定されていて、単に非表示に設定されていると思っただけです。私の間違い。

両方の返信いただきありがとうございます、彼らは両方ともベストプラクティスなどの歓声にいくつかの光を当てました。

Answer 1

これはそれをhttp://jsfiddle.net/kkwan/1/

$('#only-show-if-js-enabled').show(); 

右を行う必要があり、私はちょっとあなたがdisplay: none;display: block;にそれとも放火犯ならば、あなたが言及したコードなしCSSの作業に変更しなければ、オム...ここで問題全体を逃しましたそれか何か..？

Answer 2

この種のもののための現代的なアプローチは、あなたの準備ができて関数がこれを行う文書化することです。

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() { 
    $("body").addClass("js"); 
//]]> 
</script> 

、あなたのCSSにあなたはJS-有効のためのみを表示するものにフックとしてこれを使用することができますが（または無効にされた）デバイス。

#OnlyShowWhenJsDisbaled { display: none; } /*hide by default */ 
body.js #OnlyShowWhenJsEnabled { display: block; } /*show when js has been confirmed*/