jQuery 向 Body 标签添加一个类：测试现有的 Javascript 解决方案但没有结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16367162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a Class to Body Tag: Testing Existing Javascript Solution with No Results
提问by user2347736
I found a great piece of Javascript code (StackOverflow link: How to add a class to body tag?). However, I am having trouble implementing it.
我发现了一段很棒的 Javascript 代码（StackOverflow 链接：如何将类添加到 body 标签？）。但是，我在实施它时遇到了麻烦。
Below is the code I'm using on a test page:
下面是我在测试页上使用的代码：
<!doctype html>
<html>
<head>
<title>Javascript Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
var newClass = window.location.href;
newClass = newClass.match(/\/[^\/]+(_|\.)[^\/]+$/);
$(document.body).addClass(newClass);
</script>
</head>
<body>
</body>
</html>
However I do not see any class added to the body tag as a result. (Viewing Source in Safari, Chrome) I've tested with and without jQuery.
但是，我没有看到任何类因此添加到 body 标记中。（在 Safari、Chrome 中查看源代码）我已经在使用和不使用 jQuery 的情况下进行了测试。
Do you see what's wrong with the code?
你看到代码有什么问题了吗？
I'm working with a Behance ProSite. I can create multiple galleries, but each will have the same background because they use the same template. I need to add a unique class to the body tag so I can target each with a different CSS background property.
我正在使用 Behance ProSite。我可以创建多个画廊，但每个画廊都具有相同的背景，因为它们使用相同的模板。我需要向 body 标记添加一个唯一的类，以便我可以使用不同的 CSS 背景属性来定位每个类。
采纳答案by Matt Wondra
There's a couple minor issues with this code:
这段代码有几个小问题：
- Make sure the regex in
matchactually matches your URL patterns. I think Behance Prosites use a URL pattern like/1234/sectionand/1234/5678/section/item. - The
matchfunction returns an array, so you can't passnewClassdirectly intoaddClass. You need to pass one of the array items, likenewClass[0]. - Since your script is in the
<head>it can't modify<body>because it doesn't exist at execution time. You either need to move the script to the bottom of the page or defer execution until after the DOM is loaded.
- 确保中的正则表达式
match实际上与您的 URL 模式匹配。我认为 Behance Prosites 使用类似/1234/section和的 URL 模式/1234/5678/section/item。 - 该
match函数返回一个数组，因此您不能newClass直接传入addClass. 您需要传递数组项之一，例如newClass[0]. - 由于您的脚本在
<head>它无法修改，<body>因为它在执行时不存在。您要么需要将脚本移动到页面底部，要么将执行推迟到加载 DOM 之后。
This snippet should work specifically for Behance Prosites. The regex matches URL path segments with at least one non-numeric character, to filter out the /1234/5678/from the URL, so newClass[0]will be sectionin the above example URLs.
此代码段应专门用于 Behance Prosites。正则表达式将 URL 路径段与至少一个非数字字符匹配，以/1234/5678/从 URL 中过滤掉，因此newClass[0]将section在上面的示例 URL 中。
$(document).ready(function() {
var path = window.location.pathname;
var newClass = path.match(/[^\/]*[^\d\/][^\/]*/);
$('body').addClass(newClass[0]);
});
Good luck!
祝你好运！
回答by Xotic750
To add a class to the body tag, you can do the following in vanilla Javascript without the need to include some fat 3rd party library
要将类添加到 body 标记，您可以在 vanilla Javascript 中执行以下操作，而无需包含一些胖的 3rd 方库
If a class already exists on the body then
如果一个类已经存在于身体上，那么
document.body.className += " something";
Otherwise
除此以外
document.body.className = "something";
Example on jsfiddle
jsfiddle示例
To have the class added after the page has finished loading then use addEventListenerand create a handler for the window.onload event
要在页面加载完成后添加类，请使用addEventListener并为window.onload 事件创建处理程序
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片和子框架都已经加载完毕。
window.addEventListener("load", function () {
document.body.className = "something";
}, false);
