Javascript 重新定位类元素

发布于12月26日

我有一个眼睛图标，当你点击它时，图标会改变，它会通过js:left: 10%;重新定位.

但是，如果DOM中有ID为login-section的元素，则应该将其重新定位为left: 50%;.

我试了document.getElementsByClassName('fa-eye-slash').style.left = '50%';次，但不起作用.

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

        if(document.getElementById('login-section')) {
            // Following line is not working:
            document.getElementsByClassName('fa-eye-slash').style.left = '50%';
        }
       

    })
});

.eye {
    position: absolute;
}
.fa-eye-slash {
    left: 10%;
}

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

推荐答案

您应该 Select 被单击的元素本身，并且类为.fa-eye-slash.现在，看起来你正在try 设置类.fa-eye-slash的所有元素的left属性.

此外，还可以使用Style属性设置CSS样式.但是，由于您希望在两个位置之间切换，因此添加和删除定义Left属性的CSS类可能更好.

这里有一个可能会有帮助的例子:

let eye = document.querySelectorAll('.eye');

eye.forEach(function (v) {
    v.addEventListener('click', function () {
        this.classList.toggle('fa-eye-slash');

        if (document.getElementById('login-section')) {
            if (this.classList.contains('fa-eye-slash')) {
                this.style.left = '50%'; 
            } else {
                this.style.left = '10%'; 
            }
        }
    });
});