如何循环document.getElementsByClassName获取的元素并添加宽度校验逻辑

实现方案 #

直接在循环体内增加宽度校验逻辑即可，完整代码如下：

var elements = document.getElementsByClassName('lazyload img-responsive wp-post-image');
for (var i = 0, l = elements.length; i < l; i++) {
    var currentImg = elements[i];
    // 校验宽度小于500才执行属性设置
    if (Number(currentImg.getAttribute('width')) < 500) {
        currentImg.setAttribute("srcset", " https://www......jpg  ");
    }
}

逻辑说明 #

• 每次循环先把当前遍历到的图片元素赋值给临时变量currentImg，减少重复读取元素集合的性能消耗，也降低代码冗余
• 用Number()把getAttribute返回的字符串类型宽度值转为数值，避免出现字符串比较的逻辑异常
• 仅当宽度校验通过时，才执行srcset属性的设置操作

内容的提问来源于stack exchange，提问作者Alex1919