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与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

这里存在多个问题

document.getElementByClass应为document.getElementsByClassName
getElementsByClassName返回一个dom对象数组
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')
}

Answer 3

document.getElementsByClassName不是document.getElementByClass。

Answer 4

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);

根据值长度将CSS类添加到元素

4 个答案:

根据评论更新

更新＃2，