根据元素的 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;

我也尝试过在 Whosebug 中找到的这个 jQuery 函数：

这两个我都试过了：

SetButton(vSourceID); 

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

还有这个：

SetButton(vSourceID);

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

Answer 1

你可以这样做。

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

确保您使用的是独一无二的 id 作为 vsIDButton

或

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

Answer 2

当您使用 document.getElementById 时，您应该只将 id 属性传递给它，在您的情况下是 vsIDButton.

然后，要设置数据属性，您可以使用 Element.setAttribute or 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 标记，而不是其属性。

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

Setting a data attribute of an element based on its ID

html

javascript

jquery

getelementbyid

css-selectors