封装的js调用不了css属性是因为什么原因？

Question

window.addEventListener('load', function() {
    //获取元素
    var arrow_l = document.querySelector('.arrow_l');
    var arrow_r = document.querySelector('.arrow_r');
    var focus = document.querySelector('.focus');
    focus.addEventListener('mouseenter', function() {

        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    })
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    })
})

封装的js调用不了css属性是因为什么原因

.arrow_l {
    display:none;
    position: absolute;
    top: 205px;
    left: 0;
    width: 25px;
    height: 42px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 28px;
}

Answer 1

你调用的是load的方法，时机不对；应该要加载完成以后再设置样式。

把js代码放在页面的底部再试试。