Question

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

脚本：

<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;
}

Answer 1

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

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

或只是添加：

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

在你的javasript中，而不是用CSS隐藏身体，因为等待DOM就绪会导致闪烁。

Answer 2

默认显示。

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

这种方式默认显示（好），你仍然可以使用启用jS时所需的任何效果。

Answer 3

而不是在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

Answer 4

使用javascript设置“display：none;”属性编程。如果禁用它被忽略。

Answer 5

在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);
    });
});

Answer 6

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

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

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

我不知道我是否正在回答你的问题，如果我不是，请告诉我。

当Javascript不可用时，jQuery Fade-in变通方法

6 个答案: