如何使用 jQuery 向 Body 标签中添加类？答案

【问题标题】：How Can I Add a Class to the Body Tag using jQuery?如何使用 jQuery 向 Body 标签中添加类？
【发布时间】：2010-01-07 03:21:15
【问题描述】：

让我澄清一下我的问题，以及我正在寻找的解决方案。我正在使用 wikispaces.com，我想使用 jQuery 为每个页面动态添加一个唯一的正文类，该 jQuery 以某种方式获取 URL，然后插入将专门应用于该页面的唯一正文类。

所以，这是我的 wikispace 中的示例 url...

http://wikithemes.wikispaces.com/Audio+Page

我想要 jQuery 抓取...让我们说 .com/ 之后的第一个词，在此页面上将是 audio。所以，我需要的 jQuery 会将类 audio 应用于 body 标签，就像这样......

<body class="audio">

在他们的文档中，可以插入任何 jQuery，因为它是默认加载的。但他们澄清说，如果您使用 jQuery 这个词，它只能在 wikispaces 中使用，而不是在 jQuery 中使用的 $ 符号。像这样……

jQuery(document).ready(function(){

我非常感谢您可以为我提供的任何帮助以使其正常工作。谢谢！

【问题讨论】：

这确实感觉像是在服务器端管理得更好。
wikispaces 似乎是托管/提供的解决方案，因此服务器端解决方案似乎不是一种选择...

标签： jquery class url

【解决方案1】：

不确定您在放置代码时有哪些限制。我只需将其放在文档的<head> 中，并将该类应用于html 元素而不是body，这样您就不会得到FOUS 或“无样式内容的Flash”。该类几乎在页面加载后立即“存在”在元素上，但如果您这样做，则在它显示之前：

<script type="text/javascript">
    var loc = window.location.pathname.match(/^\/?(\w+)\b/);
    // document.documentElement is the html element, this adds the class
    if(loc) document.documentElement.className += " " + loc[1].toLowerCase();
</script>

如果你真的想使用 jQuery：

<script type="text/javascript">
    // jQuery is passed to the ready function as a parameter, so we alias it with $
    // This will work for you even with wikispaces
    jQuery(function($){
        var loc = window.location.pathname.match(/^\/?(\w+)\b/);
        if(loc) $(document.body).addClass(loc[1].toLowerCase());
    });
</script>

【讨论】：

谢谢，道格。我通过将它插入到中尝试了上面的代码。我在我的 wikispace 和查看源代码中单击了一个不同的页面，以查看一个类是否已附加到标记，但没有。我还检查了您的代码是否在标记中，而事实并非如此。所以，我猜他们可能对在模板文件中使用 javascript 有限制。他们还有一个嵌入小部件，他们说您可以在其中放置 jQuery 或任何其他 HTML 或 Javascript，但它也无法在其中工作。 Embed Widget 是一种工具，可以应用您放入其中的任何内容...
... 进入主要内容区域。我之前在那里使用过 jQuery 来进行下拉、滑动手风琴，它确实有效。不知道为什么这段代码不起作用。我想知道是否需要将所有 $ 符号转换为单词 jQuery，就像他们在文档中所说的那样。
嘿@Spencer，当您“查看源代码”时，任何通过 javascript 更改的内容（在这种情况下添加一个类）都不会显示，因为源代码是从服务器发送的。当您使用 Embed Widget 时，您至少可以看到 HTML 中的脚本块吗？如果是这样，它应该可以工作。下载 FireBug for Firefox (getfirebug.com) 并使用其“HTML”视图查看动态添加的类以验证其是否正常工作。
是的，我实际上可以使用 Embed Widget 工具查看 javascript。所以，我想它正在工作，是吧？即使我看不到应用于标记的类。我确实有 Firebug，并且每天都将它用于 CSS 工作。我将尝试使用 Inspect 按钮查看是否正在应用该类...
@Spencer B. - 您不会在查看源代码中看到它，而是尝试通过 Firebug 检查实时 DOM

【解决方案2】：

普通的javascript：

jQuery(document).ready(function(){
    var urlPath = window.location.pathname;
    document.body.className = urlPath.match(/\/(.*?)(\+|$)/)[1].toLowerCase();

});

【讨论】：

所以，我会在模板文件中的标记之前或