如何获取JavaScript设置的data-customerID属性值？

生成的按钮列表 #

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49228)" > Button Name </button>

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49568)" > Button Name </button>

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49538)" > Button Name </button>

设置属性的JavaScript函数 #

function set_buttons(customer_id) {

    var set_id = customer_id;
    var edit = document.getElementById("edit");
    var delete_customer = document.getElementById("delete");
    var orders = document.getElementById("orders");
    var password = document.getElementById("password");
    var email = document.getElementById("email");
    var details = document.getElementById("details");
    edit.setAttribute("data-customerID", set_id);
    delete_customer.setAttribute("data-customerID", set_id);
    orders.setAttribute("data-customerID", set_id);
    password.setAttribute("data-customerID", set_id);
    email.setAttribute("data-customerID", set_id);
    details.setAttribute("data-customerID", set_id);
};

被设置属性的按钮组 #

<form name="main_buttons">
          <div class="row sticky-top" style="padding:3em 0 2em 0; z-index: 900;background-color: white;">
            <div class="col-sm-1 text-left">&nbsp;</div>
            <div class="col-sm-1 text-left"><button class="btn btn-primary" id="edit" onclick="page_redirect('customer_edit')";return false; data-customerID="">Edit</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-danger" id="delete" onclick="show_modal('delete_customer')" data-customerID="">Delete</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-info" id="orders" onclick="page_redirect('customer_orders');return false;" data-customerID="">Orders</button></div>
            <div class="col-sm-2 text-left"><button class="btn btn-secondary" id="password"  onclick="show_modal('customer_password')"data-customerID="">Change Password</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-success" id="email" onclick="page_redirect('email_customer');return false;" data-customerID="">Email</button></div>
            <div class="col-sm-2 text-left"><button class="btn btn-info" id="details" onclick="show_modal('customer_details')" data-customerID="">View Details</button></div>
            <div class="col-sm-1 text-left">&nbsp;</div>
          </div>
          </form>

取值的JavaScript函数（原错误代码） #

function page_redirect(link){
  var page_link = link;

  if (page_link == 'customer_edit') {
    var customerID = document.querySelector("#edit");
    var data = customerID.dataset.data-customerID;
    alert(data);    
  }
};

错误原因：customerID.dataset.data-customerID 的写法不符合JS语法规则。JS会把这段代码解析为 customerID.dataset.data 减去 customerID，减号作为算术运算符，而customerID.dataset.data不存在（值为undefined），undefined参与减法运算会得到NaN。

正确的获取方式有两种：

方式1：使用dataset对象（驼峰命名转换） #

data-* 属性在dataset对象中会自动转换为驼峰式命名：去掉data-前缀，连字符后的首字母大写。因此data-customerID对应的是dataset.customerID：

function page_redirect(link){
  var page_link = link;

  if (page_link == 'customer_edit') {
    var customerID = document.querySelector("#edit");
    var data = customerID.dataset.customerID;
    alert(data);    
  }
};

方式2：直接使用getAttribute方法 #

直接通过完整属性名获取，不需要转换命名规则：

function page_redirect(link){
  var page_link = link;

  if (page_link == 'customer_edit') {
    var customerID = document.querySelector("#edit");
    var data = customerID.getAttribute("data-customerID");
    alert(data);    
  }
};

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