Question

我在同一网页上有一个标签。我想要＆＃34;数据值＆＃34;从标签值而不是硬编码值中获取值。

怎么做？如何将程序化的值传递给＆＃34;数据值＆＃34;并将html标记定义为空白，如下所示：

<div class="counter-animated" data-value="span dynamic value here"></div>

<span id="my_IDLabel">dynamic value</span>

Answer 1

您可以以编程方式设置数据属性

var label = document.querySelector('.value')
var target = document.querySelector('.target')
var output = document.querySelector('.output')

output.innerHTML = target.getAttribute('data-value')

document
  .querySelector('button')
  .addEventListener('click', function() {
    target.setAttribute('data-value', label.textContent)
    output.innerHTML = target.getAttribute('data-value')
  })

<label class="value">Bar</label>
<div class="target" data-value="Foo"></div>

<br/>

<button>change data-value attribute</button>

<br/><br/>

The data-value attribute is:
<br/>
<div class="output"></div>

Answer 2

您可以使用普通javascript作为element.dataset.datasetname

访问数据属性

在这种情况下，它是element.dataset.value，您可以将其设置为element.dataset.value =＆＃34; class1＆＃34;

检查此代码段

＆＃13;

window.onload = function() {
  var counterClass = document.querySelectorAll('.counter-animated');
  
alert(counterClass[0].dataset.value);
 counterClass[0].dataset.value="class1";
}

＆＃13;

<div class="counter-animated" data-value="span dynamic value here"></div>

<span id="my_IDLabel">dynamic value</span>

＆＃13;

希望有所帮助

如何将值传递给＆＃34;数据值＆＃34;

2 个答案: