10

我找到了一段很棒的 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 背景属性来定位每个类。

4

2 回答 2

21

要将类添加到 body 标签，您可以在 vanilla Javascript 中执行以下操作，而无需包含一些胖 3rd 方库

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

document.body.className += " something";

否则

document.body.className = "something";

jsfiddle上的示例

要在页面完成加载后添加类，然后使用addEventListener并为window.onload 事件创建一个处理程序

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

window.addEventListener("load", function () {
    document.body.className = "something";
}, false);
于 2013-05-03T20:43:40.837 回答
6

这段代码有几个小问题：

  1. 确保中的正则表达式match实际上与您的 URL 模式匹配。我认为 Behance Prosites 使用类似/1234/sectionand的 URL 模式/1234/5678/section/item。
  2. 该match函数返回一个数组，因此您不能newClass直接传入addClass. 您需要传递数组项之一，例如newClass[0].
  3. 由于您的脚本在其中<head>，因此无法修改<body>，因为它在执行时不存在。您要么需要将脚本移动到页面底部，要么将执行推迟到加载 DOM 之后。

此代码段应专门用于 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]);
});

祝你好运！

于 2013-05-04T18:49:00.933 回答