Htmlタグの属性値を変更するにはどうすればよいですか？

Question

私はこのHTMLコードを持っています。

document.getElementById("HostsBar").setAttribute("data-to", "120");

<div class="container-fluid"> 
 
     <div class="block-header"> 
 
      <h2>SECURITY DASHBOARD</h2> 
 
     </div> 
 
     <div id="burayaset"> 
 
      <!-- Widgets --> 
 
      <div class="row clearfix"> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-blue">remove_from_queue</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">HOSTS</div> 
 
          <div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-blue-grey">storage</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">PRODUCTS</div> 
 
          <div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-cyan">warning</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">VULNERABILITIES</div> 
 
          <div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

私はカウントするバックエンドから来たデータで値を変更したいです。どのように私はJavascriptでそれを行うことができます。私は試みたしかし、それは働かなかった。

Answer 1

その更新：

alert(document.getElementById("HostsBar").getAttribute('data-to')); 
 
document.getElementById("HostsBar").setAttribute("data-to", "120"); 
 
alert(document.getElementById("HostsBar").getAttribute('data-to'));

<div class="container-fluid"> 
 
     <div class="block-header"> 
 
      <h2>SECURITY DASHBOARD</h2> 
 
     </div> 
 
     <div id="burayaset"> 
 
      <!-- Widgets --> 
 
      <div class="row clearfix"> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-blue">remove_from_queue</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">HOSTS</div> 
 
          <div id="HostsBar" class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-blue-grey">storage</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">PRODUCTS</div> 
 
          <div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12"> 
 
        <div class="info-box-4"> 
 
         <div class="icon"> 
 
          <i class="material-icons col-cyan">warning</i> 
 
         </div> 
 
         <div class="content"> 
 
          <div class="text">VULNERABILITIES</div> 
 
          <div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

Answer 2

私は問題を解決しました。そのライブラリとその機能によってのみ変更することができます。

$("#HostsBar").countTo({from:0, to:response});