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/en-US/docs/Web/API/Element/setAttribute

很抱歉误读了首先获取数据价格属性的问题 - 因此编辑

您还可以使用数据集属性：

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

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

如果使用数据集检查您是否需要较旧的浏览器支持： https://caniuse.com/#feat=dataset

element id获取data属性的值

1 个答案: