添加一个类到Body标签:测试没有结果的现有Javascript解决方案

我发现了一个伟大的Javascript代码(StackOverflow链接:如何添加一个类到正文标签?)。但是，我在实现它时遇到了麻烦。

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

<!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背景属性。

要向body标签添加一个类，您可以在普通Javascript中执行以下操作，而不需要包含一些臃肿的第三方库

如果类已经存在，则

document.body.className += " something";

否则

document.body.className = "something";

关于jsfiddle的示例

要在页面完成加载后添加类，请使用addEventListener并为窗口创建处理程序。onload事件

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

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

这段代码有一些小问题:

确保match中的正则表达式实际上匹配您的URL模式。我认为Behance Prosites使用的URL模式像/1234/section和/1234/5678/section/item。
match函数返回一个数组，所以你不能将newClass直接传递给addClass。您需要传递一个数组项，如newClass[0]。

<head>

<body>

这个片段应该专门适用于Behance Prosites。正则表达式用至少一个非数字字符匹配URL路径段，以从URL中过滤出/1234/5678/，因此在上面的示例URL中，newClass[0]将是section。

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

祝你好运!

相关内容

最新更新

热门标签：