526互联

html 隐藏元素占位/不占位

发布时间 2023-10-27 18:33:22作者: Cold的窝

关于循环定时隐藏/显示元素，从而实现一个一闪一闪的效果如图:

实现方法：

  1. 设置 display
    但是display在设为none是不占位置隐藏的
display:none;
  1. 设置visibility
    而visiblity是占位隐藏
visibility:hidden;

var num = true;
window.setInterval(() => {
    var i = document.querySelector(".i");
    if (num) {
        i.style.visibility = "visible";
        num = !num;
    } else {
        i.style.visibility = "hidden";
        num = !num;
    }
}, 1000)

脱离文档流拓展
position:absolute;不占位置
position:relative占位置