js 如何动态修改部分图片的 style 样式？

Question

<script>
    window.onload = function() {
        var contentContainer = document.getElementsByClassName("content-container")
        if (contentContainer.length != 1)
            return;

        // 获取主页面宽度
        var contentContainerWidth = window.getComputedStyle(contentContainer[0]).width
        var widthLimit = contentContainerWidth * 1.7

        // 得到 contentContainer 下的所有图片并做处理
        var imgs = contentContainer[0].getElementsByTagName("img")
        var len = imgs.length;
        for (var i = 0; i < len; i++) {
            if (imgs[i].naturalWidth >= widthLimit){
                continue // 符合条件，调过，不处理
            }
            else {
                // 下面两个方法都使全局生效了
                // imgs[i].style.maxHeight = "25rem"
                imgs[i].setAttribute("style", "max-height:25rem");
            }
        }
    }
</script>

这是我写的代码。大概思路从代码直接看还是很容易懂得，就是遍历所有图片，如果图片不符合规格就单独给这个图片添加样式。运行之后发现所有图片都被影响了。

我找了一圈也没找到其它的解决方案，有懂的大兄弟指导一下，先行谢过。

Answer 1

if (imgs[i].naturalWidth >= widthLimit){
    console.log("hey")//看看有多少个满足条件...imgs[i].naturalWidth是什么东西？
    continue // 符合条件，调过，不处理
}

Answer 2

window.getComputedStyle(contentContainer[0]).width

返回的是字符串，比如 "22px"

而且for循环里面逻辑可以简化成一个if