![](/img/trans.png)
[英]How to capture the change of 'data-value' in <button> tag ? (html, js)
[英]how to change data-value on div by JS
我正在做一个项目,我需要通过 js 语言更改数据值的属性。
你可以在这里看到代码。
<div class="col-sm-4">
<div class="ldBar auto no-percent label-center m-auto" id="tree"
style="height: 300px; width: 300px;"
>>>>>>data-value="50"<<<<<<
data-type="fill" data-img="tree1.svg" data-fill="data:ldbar/res,bubble(#f00,#d00,100,1)"
data-fill-background="#ddd"
data-fill-background-extrude="0">
<svg xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="-4.5 -4.5 109 109">
</svg>
<div class="ldBar-label"></div>
</div>
</div>
看起来数据值设置为 50。通过这个,我只是将图像填充到 50%。 但我想自动更改此值。 一个 Js 代码,让它可以说 25. 怎么能有这个访问来改变这个值?
您可以使用 jQuery 的.data()
来获取/设置属性值:
$('#tree').data('value', '25'); console.log($('#tree').data('value')); // 25
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4"> <div class="ldBar auto no-percent label-center m-auto" id="tree" style="height: 300px; width: 300px;" data-value="50" data-type="fill" data-img="tree1.svg" data-fill="data:ldbar/res,bubble(#f00,#d00,100,1)" data-fill-background="#ddd" data-fill-background-extrude="0"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="100%" height="100%" viewBox="-4.5 -4.5 109 109"> </svg> <div class="ldBar-label"></div> </div> </div>
这是用于读取和写入数据属性的简单纯 js 示例:
var setDataAttribute = function() { var dataContainer = document.getElementById('data-container'); var dataValue = parseInt(dataContainer.getAttribute('data-value')); dataContainer.setAttribute('data-value', dataValue + 1); dataContainer.innerHTML = dataValue + 1; }
<div id="data-container" data-value="25">25</div> <button onclick="setDataAttribute()">increase data value</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.