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

前端之家收集整理的这篇文章主要介绍了添加一个类到身体标签:测试现有的JavaScript解决方案没有结果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我发现一个伟大的 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背景属性来定位每个类.

解决方法

这段代码有一些小问题:

>确保匹配中的正则表达式实际匹配您的URL模式.我认为Behance Prosites会使用/ 1234 / section和/ 1234/5678 / section / item等URL格式.
> match函数返回一个数组,所以你不能直接将newClass传递给addClass.你需要传递一个数组项,像newClass [0].
>由于您的脚本位于< head>它不能修改< body>因为它在执行时不存在.您需要将脚本移动到页面底部或延迟执行,直到DOM加载完毕.

此片段应适用于Behance Prosites.正则表达式与至少一个非数字字符的URL路径段匹配,以从URL过滤掉/ 1234/5678 /,因此newClass [0]将是上述示例URL中的一部分.

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

祝你好运!

原文链接:https://www.f2er.com/js/152044.html

猜你在找的JavaScript相关文章