如何更改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>

我想用来自后端的数据更改count-to值。我怎么能在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});