根据元素的ID设置元素的数据属性

Question

我正在尝试设置此元素的data-whatever属性：

<a
    class='btn-lg btn-success bg-primary'
    id='vsIDButton'
    data-toggle='modal'
    href='#messageModal'
    role='button'
    data-whatever=''>New Message</a>

现在我设法通过替换整个元素来做到这一点，但是应该有更好的方法。

我已经尝试过使用innerHTML对此进行一些修改：

const vSourceID="contact:7573981724739861"; 

document.getElementById("vsIDButton.attr('data-whatever')").innerHTML = vSourceID;

我也尝试过在StackOverflow中找到的jQuery函数：

我都尝试过这两种方法：

SetButton(vSourceID); 

function SetButton() {
    $('#vsIDButton > data-whatever').html();
}

这：

SetButton(vSourceID);

function SetButton(x) {
    $('#vsIDButton > data-whatever').html(x);
}

Answer 1

使用document.getElementById时，应仅将id属性（在您的情况下为vsIDButton）传递给它。

然后，要设置数据属性，可以使用Element.setAttribute或HTMLElement.dataset，具体取决于您需要支持的浏览器：

const vSourceID = 'contact:7573981724739861'; 

// Using setAttribute:
document.getElementById('vsIDButton').setAttribute('data-whatever', vSourceID);

// Using dataset (you only need one or another):
document.getElementById('vsIDButton').dataset.whatever = vSourceID;

#vsIDButton::before {
  /*
    This will display the value of the data-whatever attribute
    in a ::before pseudo-element so that we can easily see that
    the JS code is working.
  */
  content: attr(data-whatever);
}

<div id="vsIDButton"></div>

请注意，在使用dataset时，您无需添加data-前缀，因此您只需这样做：

document.getElementById('vsIDButton').dataset.whatever = vSourceID;

这些与Element.innerHTML无关，用于获取或设置元素（而不是其属性）中包含的HTML或XML标记。

Answer 2

您可以这样做。

    let vSourceID="contact:7573981724739861"; 
    document.getElementById("vsIDButton").setAttribute('data-whatever', vSourceID);

确保您使用唯一的id作为vsIDButton

OR

    SetButton(vSourceID);
    function SetButton(x) {
       $('#vsIDButton').attr('data-whatever',x);
    }