如何通过JavaScript获取按钮data-post-id并修改其背景色？

嘿，我来帮你搞定这个问题！你的核心问题是没在点击事件里拿到触发点击的那个具体按钮元素，反而用了document.getAttribute——这肯定拿不到单个按钮的属性值呀，咱们一步步修正：

1. 把点击的按钮元素传到函数里 #

先修改按钮的onclick属性，把当前被点击的按钮本身作为参数传进去：

<button type="submit" class="btn btn-primary btn-responsive btnVotePost" name="Approve" value="Approve" id="btnApprove{{post.postId}}" data-post-id="{{post.postId}}" onclick="approveClicked(this)">Approuver</button>

这里的this就代表你点的那个按钮，直接把它传给函数就行。

2. 在JS函数里接收元素并获取data-post-id #

接下来修正你的函数——注意JS是大小写敏感的，建议用小驼峰命名approveClicked，别写错大小写：

function approveClicked(button) {
  // 方法1：用getAttribute直接获取属性值
  const postId = button.getAttribute("data-post-id");
  
  // 方法2：更推荐的HTML5标准方式——用dataset属性
  // const postId = button.dataset.postId;
  
  // 现在就能拿到postId了，接着修改按钮背景色
  button.style.backgroundColor = "#28a745"; // 举个例子，改成绿色
  console.log("当前点击的帖子ID：", postId);
}

两种获取data属性的方式都能用，dataset更简洁，它会自动把data-开头的属性转换成驼峰命名（比如data-post-id对应dataset.postId）。

额外小提醒 #

• 别写错函数声明：你原来写的Function ApproveClicked()是错的，JS里函数声明要用小写的function，函数名也尽量统一小驼峰风格，避免大小写坑。
• 如果按钮是动态加载的（比如AJAX渲染），也可以用事件委托绑定点击事件，不用给每个按钮加onclick，不过当前你的场景直接传this就足够好用啦。

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