使用javascript更改显示属性会搞乱格式

Question

我是网页的一部分，仅当启用javascript时才应显示。

我尝试了以下方法：

方法1：我将类设置为display: hidden; 然后，如果JavaScript可以通过覆盖它进行更改，则对其进行更改...

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

并且

方法2：我将ID更改为已将显示设置为阻止（或自动）...

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

这两种方法似乎都导致实际的格式混乱，第一种方法忽略了我的CSS，即列表样式为none，第二种方法则隐藏了溢出。

这是怎么回事？

更新：令人尴尬的是，我将溢出设置为auto ，只是认为它设置为隐藏。 我的错。

不过，感谢您的两个答复，它们都使您对最佳做法等有所了解。

Answer 1

这应该做到这一点http://jsfiddle.net/kkwan/1/

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

是的，我有点想念整个问题……嗯，如果更改display: none; ，css是否可以在display: none;您提到的代码的情况下工作display: none; display: block; 或者，如果您对它进行纵火调试等等。

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*/