在Tampermonkey中用JS/jQuery设置body标签ID失败的解决咨询

我来帮你排查问题并给出可行的解决办法：

问题分析 #

你遇到的两种方法无效，原因各有不同：

• 原生JS写法错误：getElementsByTagName("body")返回的是一个HTMLCollection（类数组对象），不是单个DOM元素，因此直接调用setAttribute会报错，必须取数组中的第一个元素。
• jQuery写法可能的问题：你的代码本身逻辑是对的，但如果没有正确引入jQuery库，或者代码写在jQuery加载之前，就会失效。

正确的实现方式 #

1. 原生JS（推荐更简洁的写法） #

直接通过document.body获取body元素，它本身就是单个DOM节点，可以直接设置id：

// 给body设置id为top
document.body.id = "top";

// 创建返回顶部链接
var TopLink = document.createElement("a");
TopLink.setAttribute("href", "#top");
TopLink.innerHTML = "Top";
TopLink.setAttribute("class", "btn btn-default btn-ref");
TopLink.setAttribute("style", "position:absolute; top:280px; right:40px; width:120px; background:yellow;");
document.body.appendChild(TopLink);

如果你坚持用getElementsByTagName，修正后的代码是：

var body_tag = document.getElementsByTagName("body")[0];
body_tag.setAttribute("id", "top");

2. jQuery写法（确保jQuery已加载） #

先确认你的页面已经引入了jQuery库，然后使用DOM就绪事件确保代码在页面加载完成后执行：

$(function() {
  // 设置body的id
  $("body").attr('id', 'top');
  
  // 创建返回顶部链接
  var TopLink = $("<a>", {
    href: "#top",
    class: "btn btn-default btn-ref",
    style: "position:absolute; top:280px; right:40px; width:120px; background:yellow;",
    text: "Top"
  });
  $("body").append(TopLink);
});

额外小技巧 #

其实你也可以不用给body设置id，直接让链接跳转到页面顶部：

TopLink.setAttribute("href", "#");
// 或者用JS实现平滑滚动效果
TopLink.addEventListener("click", function(e) {
  e.preventDefault();
  window.scrollTo({top: 0, behavior: 'smooth'});
});

内容的提问来源于stack exchange，提问作者4532066