点击切换眼睛图标位置失效求助：login-section下设置left:50%无效

核心错误分析 #

你写的document.getElementsByClassName('fa-eye-slash').style.left = '50%'无效的原因是：

• getElementsByClassName()返回的是HTMLCollection（元素集合），不是单个DOM元素，不能直接访问.style属性。
• 完全没必要重新查询DOM，当前点击的元素就是事件回调里的this，直接操作它即可。

修正后的代码 #

JavaScript #

let eye = document.querySelectorAll('.eye');
eye.forEach(function (v) {
    v.addEventListener('click', function () {
        this.classList.toggle('fa-eye-slash');
        
        // 直接操作当前点击的元素，无需重新查询
        const hasLoginSection = document.getElementById('login-section') !== null;
        this.style.left = hasLoginSection ? '50%' : '10%';
    })
});

CSS #

.eye {
    position: absolute;
    /* 初始设置默认left，JS会根据条件覆盖 */
    left: 10%;
}
/* 保留类样式用于图标切换，left优先由JS控制 */
.fa-eye-slash {
    /* 可添加图标相关样式，如颜色、大小等 */
}

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div id='login-section'>
    <i class="fa-solid fa-eye eye"></i>
</div>

补充优化方案（纯CSS实现定位逻辑） #

如果不需要动态修改定位规则，也可以用CSS选择器优先级实现：当父元素是#login-section时，子元素.fa-eye-slash的left设为50%，JS只负责切换类名即可：

.eye {
    position: absolute;
    left: 10%;
}

#login-section .fa-eye-slash {
    left: 50%;
}

对应的JS可简化为：

let eye = document.querySelectorAll('.eye');
eye.forEach(function (v) {
    v.addEventListener('click', function () {
        this.classList.toggle('fa-eye-slash');
    })
});

这种方式更符合"样式交给CSS，逻辑交给JS"的分工原则。

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