0

我一直在我的主页上使用 jQuery 淡入，最近我才意识到禁用 Javascript 时它会显示黑屏。display: none当 Javascript 不可用时，如何更改删除属性？

脚本：

<script type="text/javascript">
   $(document).ready(function(){
       $('html').fadeIn(3000);
   })
</script>

CSS：

html {
    background: #000;
    height: 100%;
}
body {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: none;
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
4

6 回答 6

6 
<noscript>
   <style type="text/css">
       body {display: block;}
   </style>
</noscript>

在您问题中的样式之后的头部部分将显示正文。

或者只是添加：

document.body.style.display = 'none';

在你的 javasript 中而不是用 CSS 隐藏正文，因为等待 DOM 准备好会导致闪烁。

于 2013-04-26T22:20:30.743 回答
2

默认显示。

然后在你的 JS 中，立即隐藏它并让它淡入。

这样，它默认显示（很好），并且您仍然可以在启用 jS 时使用您需要的任何效果。

于 2013-04-26T22:20:21.303 回答
0

而不是在 HTML 中使用 noscript 标签：
HTML

<noscript><div id='cover'></div></noscript>

CSS

#cover{
   width:100%;
   height:100%;
   position:absolute;
   background-color:black
}

更多信息在这里：http ://www.w3schools.com/tags/tag_noscript.asp

于 2013-04-26T22:20:32.877 回答
0

使用javascript设置“显示：无；” 以编程方式属性。如果它禁用它被忽略。

于 2013-04-26T22:20:54.837 回答
0

在您的 JS/CSS 中执行以下操作。

在您的 HTML 中：

<!doctype html>
<html class="no-js">

在您的 CSS 中：

body {
    /* your styles */
}

body.js {
   display: none;
}

在你的 JS 中：

(function () {
    var $html = $('html').removeClass('no-js', 'js');
    $(document).ready(function () {
        $html.fadeIn(3000);
    });
});
于 2013-04-26T22:21:58.723 回答
0

您无法检查 javascript 是否不可用。您可以通过运行任何 javascript 来检查 javascript 是否可用。

首先，我会像往常一样在 CSS 中定义 display 属性。然后我将设置为 window.onload 以将显示属性更改为无。

这会导致当 javascript 不可用时，代码不会运行并且显示属性将保持正常。

我不知道我是否准确地回答了您的问题，如果不是，请告诉我。

于 2013-04-26T22:25:44.143 回答