How can I change attribute value of Html tag?

问题内容:

I have this HTML code.

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>

I want to change count-to value with data that come from backend. How can I do that in Javascript. I tried But it not worked.

问题评论:

    
Try this $("#HostsBar").attr("data-to", "120");
    
Do you want to show the value on UI or just set it as an attribute?
    
I wanto show the value on UI
– Lucas
2 hours ago
    
User innerText to show the value.
    
But its innerText value is empty, I have to change its count-to value.
– Lucas
2 hours ago

答案:

答案1:

its updating :

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>

答案评论:

原文地址:

https://stackoverflow.com/questions/47754100/how-can-i-change-attribute-value-of-html-tag

添加评论

友情链接:蝴蝶教程