javascript - 根据值长度向元素添加 CSS 类

Question

我建立了一个菜单，当菜单项变得太长时，我想更改一些 CSS。这是我所拥有的，但它不起作用：

<script>
    var item1 = document.getElementByClass('nm-item-link-l');
    var item2 = document.getElementByClass('nm-item-link');
    if (item1.length > 20) {
        changeit = document.getElementByClass('nm-item-link-l').addClass('addclass');
    } else {
        ;
    }
    if (item2.length > 20) {
        changeit2 = document.getElementByClass('nm-item-link-l').addClass('addclass');
    } else {
        ;
    }
</script>

Answer 1

document.getElementByClass

除非您自己定义它，否则它不是有效的 js 函数。你可能想要getElementByClassName Same for addClass。addClass是一个有效的 jQuery 方法，但不是标准的 javascript 函数。

根据评论更新

因为看起来你正在使用 jQuery

   var list1 = $(".nm-item-link-l");
   var list2 = $(".nm-item-link");

   if (list1.length > 20) {
       list1.addClass("addClass");
   }
   if (list2.length > 20) {
       list2.addClass("addClass");
   }

更新#2，

由于您似乎想按字长过滤：

   var list1 = $(".nm-item-link-l");
   var list2 = $(".nm-item-link");
   list1.each(filterFunc);
   list2.each(filterFunc);

   function filterFunc(index,value){
     if (parseInt(value).text().length > 20) {
         $(value).addClass("addClass");
     }
   }

Answer 2

function minimumClass(nodes, className, minNodes) {
  for (var i = 0, n = nodes.length; n > minNodes && i < n; i++) {
    nodes[i].classList.add(className);
  }
}

minimumClass(document.getElementsByClassName('nm-item-link-1'), 'add-class', 20);
minimumClass(document.getElementsByClassName('nm-item-link'), 'add-class', 20);

Answer 3

它是 document.getElementsByClassName 而不是 document.getElementByClass。

Answer 4

这里有多个问题

1. document.getElementByClass应该document.getElementsByClassName
2. getElementsByClassName返回一个 dom 对象数组
3. dom 对象中没有调用方法addClass，需要使用属性className来更新class元素的属性。

代码

var items = document.getElementsByClassName('nm-item-link-l');
for(var i = 0; i < items.length; i++){
    items[i].className = 'addclass';
}

如果你有 jquery

var item1 = $('.nm-item-link-l');
if(item1.length > 20){
    item1.addClass('addclass')
}