元素ID獲取數據屬性的值

Question

運行此腳本后，#result將保留一些值（例如85）。 我需要將此值（85）放入data-price屬性。

怎么做？

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#calc-dist').onclick = function() {
            const lat1 = document.querySelector('#lat1').value;
            const lon1 = document.querySelector('#lon1').value;
            const lat2 = document.querySelector('#lat2').value;
            const lon2 = document.querySelector('#lon2').value;
            const p1 = new LatLon(Dms.parseDMS(lat1), Dms.parseDMS(lon1));
            const p2 = new LatLon(Dms.parseDMS(lat2), Dms.parseDMS(lon2));
            const dist = parseFloat(p1.distanceTo(p2).toPrecision(4));
            document.querySelector('#result').textContent = dist;
    }
});

<span data-price=" " id="result"></span>

Answer 1

您需要設置數據屬性：

document.querySelector('#result').setAttribute('data-price', 85);

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute

抱歉，誤將問題理解為首先獲得了data-price屬性-因此進行了修改

您還可以使用數據集屬性：

document.querySelector('#result').dataset.price = 85

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Howto/Use_data_attributes

如果使用數據集，請檢查是否需要較舊的瀏覽器支持： https : //caniuse.com/#feat=dataset