javascript - 适用于 JavaScript 禁用用户的 SlidesJS

Question

我对 JavaScript 还很陌生。

我正在使用 SlidesJS，它工作得很好。

但是，在处理 JavaScript 禁用用户时，这有点棘手。对于禁用 JavaScript 的用户，图像将对齐。我不知道如何处理它，因为图像嵌入在 HTML 代码中。

<div id="slides">
    <img src="http://placehold.it/940x528">
    <img src="http://placehold.it/940x528">
</div>
<script>
    $(function(){
      $("#slides").slidesjs({
  ......
</script>

是否有办法仍然使用 SlidesJS，但对于禁用 JavaScript 的用户，网页显示一个默认图像，并隐藏所有其他图像？

Answer 1

使用 CSS 和 Modernizr ，当且仅当启用 JavaScript 时，它才可以将类添加到 HTML 元素。

#slides > img + img {
    display: none; // may need to make this !important
}
.js #slides > img + img {
    display: block;
}

(请注意，modernizr.js 应在页面上的任何其他 JS 之前运行。)

如果您想要的只是 JavaScript 检测，您甚至不需要 Modernizr —— 只需一行代码和上面的 CSS:

document.getElementsByTagName("html")[0].className = "js";

或者，以非破坏性的方式对待它:

document.getElementsByTagName("html")[0].className
     = document.getElementsByTagName("html")[0].className + " js";