Javascript 若数据属性高于X编号，则将类添加到元素

我需要将Classhighpc添加到数据属性为procent的每个元素中，该属性大于51。我有一个jQuery解决方案，但我需要纯JavaScript。有人能帮我吗？这就是我目前得到的：
HTML

<span data-procent="4" class="procent">4%</span>
<span data-procent="59" class="procent">59%</span>

---

这是您的固定功能：

function highpc() {
    var elements = document.querySelectorAll('.procent');
    for (var i = 0; i < elements.length; i++) {
        var procent = elements[i].getAttribute("data-procent");
        if (parseInt(procent) > 51) {
            elements[i].className += " highpc";
        }
    }
}

window.onload = highpc;

函数highpc（）{
var elements=document.querySelectorAll（'.procent'）；
对于（var i=0；i51）{
元素[i]。类名+=“highpc”；
}
}
}
window.onload=highpc；

注意最后一行：

highpc

之后不需要

（）

，因为您希望

window.onload

是对函数的引用，而不是执行的结果

参考：选择元素

---

演示：您还没有指定此.elem的

是什么，而且您的脚本中也没有循环。
您还使用变量
procent
从元素中获取数据属性。稍后，您将尝试使用它链接元素。尝试更新代码：

function highpc(){
    var elements = document.getElementsByClassName('procent');

    for(i=0;i<elements.length;i++) {
       var procent = elements[i].getAttribute("data-procent");
       if (parseInt(procent) > 51) {
           elements[i].className=elements[i].className+" highpc";
       }
    }
}

函数highpc（）{
var elements=document.getElementsByClassName（'procent'）；
对于（i=0；i 51）{
元素[i].className=elements[i].className+“highpc”；
}
}
}

使用纯javascript和实现自己的getElementsByClassName更新了fiddle

function getElementsByClass(className){
    var celems = new Array();
    var elems = document.getElementsByTagName("*");

    for(var i = 0; i < elems.length;i++){
        if(elems[i].className.indexOf(className) != -1){
            celems.push(elems[i]);
        }
    }

    return celems;
}

function highpc(){
    var elems =  getElementsByClass("procent");
     console.log(elems);
    for(var i = 0; i < elems.length; i++){
        highpc_ex(elems[i]);
    }
}

function highpc_ex(elem){
    var procent = elem.getAttribute("data-procent");
    if (parseInt(procent) > 51) {
        elem.className=elem.className+" highpc";
    }
}

window.onload = highpc();

函数getElementsByClass（类名）{
var celems=新数组（）；
var elems=document.getElementsByTagName（“*”）；
对于（变量i=0；i51）{
elem.className=elem.className+“highpc”；
}
}
window.onload=highpc（）；

函数highpc（）{
var aSpans=document.getElementsByTagName（“span”）；
对于（变量i=0；i51）{
eSpan.className+=“highpc”；
}
}
}

这与其他人已经发布的内容类似。您可能会发现，对于更大的html集，这一点更为有效

Ref:
您是否检查过js控制台中的错误？什么是
这个.elem
？嗯，这是否意味着我必须首先识别每个跨度<代码>var span1=document.getElementById（“span1”）；var procent=span1.getAttribute（“数据处理”）
function getElementsByClass(className){
    var celems = new Array();
    var elems = document.getElementsByTagName("*");

    for(var i = 0; i < elems.length;i++){
        if(elems[i].className.indexOf(className) != -1){
            celems.push(elems[i]);
        }
    }

    return celems;
}

function highpc(){
    var elems =  getElementsByClass("procent");
     console.log(elems);
    for(var i = 0; i < elems.length; i++){
        highpc_ex(elems[i]);
    }
}

function highpc_ex(elem){
    var procent = elem.getAttribute("data-procent");
    if (parseInt(procent) > 51) {
        elem.className=elem.className+" highpc";
    }
}

window.onload = highpc();

function highpc() {
    var aSpans = document.getElementsByTagName("span");
    for(var i = 0; i < aSpans.length; i++) {
        var eSpan = aSpans[i];
        var procent = eSpan.getAttribute("data-procent");
        if (procent != null && parseInt(procent) > 51) {
            eSpan.className += " highpc";
        }
   }
}