javascript - 如何通过JS更改div上的数据值

Question

我正在做一个元素，我需要用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%。但我想自动更改此值。一个使它成为 25 的 Js 代码。如何拥有此访问权限来更改此值？

Answer 1

您可以使用 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>