Question

我发现了一段很棒的Javascript代码（StackOverflow链接：How to add a class to body tag?）。但是，我无法实现它。

以下是我在测试页面上使用的代码：

<!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>

但是我没有看到任何类添加到body标签中。（在Safari，Chrome中查看源代码）我已经使用和不使用jQuery进行了测试。

你看到代码出了什么问题吗？

我正在使用Behance ProSite。我可以创建多个画廊，但每个画廊都有相同的背景，因为它们使用相同的模板。我需要在body标签中添加一个唯一的类，这样我就可以使用不同的CSS背景属性来定位每个类。

Answer 1

要在body标签中添加一个类，您可以在vanilla Javascript中执行以下操作，而无需包含一些胖的第三方库

如果身上已经存在一个类，那么

document.body.className += " something";

否则

document.body.className = "something";

jsfiddle

上的示例

要在页面加载完成后添加类，请使用addEventListener并为window.onload event

创建处理程序

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像和子帧已完成加载。

window.addEventListener("load", function () {
    document.body.className = "something";
}, false);

Answer 2

此代码存在一些小问题：

确保match中的正则表达式与您的网址格式匹配。我认为Behance Prosites使用的网址格式如/1234/section和/1234/5678/section/item。
match函数返回一个数组，因此您无法将newClass直接传递给addClass。您需要传递其中一个数组项，例如newClass[0]。
由于您的脚本位于<head>，因此无法修改<body>，因为它在执行时不存在。您需要将脚本移动到页面底部或将执行推迟到加载DOM之后。

此代码段应专门针对Behance Prosites。正则表达式将网址路径段与至少一个非数字字符匹配，以从网址中过滤掉/1234/5678/，因此newClass[0]在上述示例网址中将为section。

$(document).ready(function() {
  var path = window.location.pathname;
  var newClass = path.match(/[^\/]*[^\d\/][^\/]*/);
  $('body').addClass(newClass[0]);
});

向正文标记添加类：测试没有结果的现有Javascript解决方案

2 个答案: