javascript - JavaScript CSS 选择器

Question

我正在阅读一些 JavaScript 以尝试创建自己的滑块，但遇到了一些让我有点困惑的东西。有一个 CSS 规则如下：

html.js #slideshow .slides img
{
    position: absolute;
}

解释说，该规则仅在 JavaScript 可用时才适用。现在我有点困惑......如果浏览器中提供 JavaScript，是否会应用此规则？或者文件“html.js”是否已包含在 html 页面中，或者是否包含任何 JavaScript 文件？

提前致谢。

score 5 · Accepted Answer

这是一种使用 javascript 将类“js”添加到 html 标记的技术。没有 javascript，没有 js 类。让你的 CSS 很容易知道 JS 是否启用。

score 2 · Accepted Answer

可能在您的页面中，您的头部有一个脚本，该脚本js向根元素添加了一个类

这将确保仅当客户端上的 javascript 可用时才应用 CSS 规则。当然，如果 javascript 不可用，则脚本不会插入该类。

这是一种现代方法，专门用于防止无样式内容 (FOUC) 的闪现

score 1 · Accepted Answer

您看到的页面可能正在使用Modernizr。它是一个 JavaScript 库，可检测用户浏览器中的 HTML5 和 CSS3 功能，并通过向 HTML 元素添加类“no-js”来工作，当页面加载时，Modernizr 将其替换为您正在测试的规则集。

如果您想在浏览器中测试特定功能，请查看 Modernizr 网站了解更多详细信息。

如果您不想使用 Modernizr，您可以使用 JavaScript 直接将其放置在您的<title>标签中：

<script>
    document.documentElement.className = document.documentElement.className.replace(/(\s|^)no-js(\s|$)/, '$1' + 'js' + '$2');
</script>

3 回答 3